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

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

Answer 1

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

因此，请尝试删除它，并将其替换为display: inline-block;，因为div是一个块组件，并且您将其放在内联组件（a）中...... / p>

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

希望这有帮助。

Answer 3

从技术上讲，将<a>置于<div>内是语义上正确的方法，如另一个答案中所述。

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

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

3 个答案: