div的边框是浮线而不是实际边框

Question

我可能遗漏了一些基本的东西。就这么简单:

.items {
  float: left;
  font-family: 'Arial', sans-serif;
  text-decoration: none;
  color: black;
  font-size: 30px;
  margin: 25px 30px 0px 0px;
}

.langswitch {
  border: 3px solid #86D1DA;
  border-radius: 5px;
}

<a href="#" class="langswitch">
  <div class="items">Italiano</div>
</a>

jsFiddle

将 class 从锚点移动到 div 将使它（边框）一起消失。

Answer 1

将 <a> 标签放在 <div> 内，而不是相反。

.items{
  float: left;
  font-family: 'Arial', sans-serif;
  text-decoration: none;
  color: black;
  font-size: 30px;
  margin: 25px 30px 0px 0px ;
}

.langswitch{
  border: 3px solid #86D1DA;
  border-radius: 5px;
}

<div class="items"><a href="#" class="langswitch">Italiano</a></div>

希望对您有所帮助。

Answer 2

好吧，你的 <a class="lamgswitch"> 没有任何内容...float: left; 使 <div class="items"> 浮出水面...

所以尝试删除它，并用 display: inline-block; 替换它，因为 div 是一个块组件，你把它放在一个内联组件中 (a).. .

.items {
  display: inline-block;
  font-family: 'Arial', sans-serif;
  text-decoration: none;
  color: black;
  font-size: 30px;
  margin: 25px 30px 0px 0px;
}

.langswitch {
  border: 3px solid #86D1DA;
  border-radius: 5px;
}

<a href="#" class="langswitch">
  <div class="items">Italiano</div>
</a>

Answer 3

从技术上讲，将 <a> 放在 <div> 中是语义上正确的方法，如其他答案中所述。

如果您真的必须这样做，您需要将 <a> 标签的显示从 inline 更改为 inline-block。

div的边框是浮线而不是实际边框

This div's border is a floating line instead of an actual border

html

css

border