html - 这个 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

将类从 anchor 移动到 div 将使它(边框)一起消失。

Answer 1

嗯，你的<a class="lamgswitch">没有任何内容... float: left;使 <div class="items">从中浮出...

所以尝试删除它，并用display: inline-block;代替它, 作为 div是一个 block 组件，你把它放在一个内联组件中(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>