Question

如何在包装在div中的<a>标签之间给空格？

<div class="sideMenu"> 
  <a href="#" > A </a>
  <a href="#" > B </a>
  <a href="#" > C </a>
</div>

css：

.sideMenu{
  padding: 50px;
}

Answer 1

您可以为div中的所有标签应用margin-right属性。

.sideMenu a {
  margin-left: 5%; 
/* use %, em, px. % and em are recommended. */
}

Answer 2

我建议使用CSS规则：

.sideMenu a {
   margin-right: 10px;
}
.sideMenu a:last-of-type {
   margin-right: 0;
}

Answer 3

选择器.sideMenu对div进行填充，而不是其中的a元素。要选择a元素，可以使用后代选择器.sideMenu a或子选择器.sideMenu > a。

例如：

.sideMenu a {
  background: cyan;
  border: 1px solid;
  padding: 20px;
}

broadcasting

Answer 4

您还可以使用不间断的空格字符（取决于您需要什么，即空格还是某些空格）：

<div class="sideMenu"> <a href="#" > A </a> </div>

Answer 5

添加了.sideMenu a个可能对您有帮助的CSS。

.sideMenu {
  padding: 50px;
}

.sideMenu a{
    line-height: 1em;
    display: inline-block;
    text-decoration: none;
    padding: 12px;
    margin: 10px;
  }

<div class="sideMenu"> 
  <a href="#" > A </a>
  <a href="#" > B </a>
  <a href="#" > C </a>
</div>

如何在包裹在div中的<a>标记之间给空格

5 个答案: