Question

我有一个带有css的导航栏但是li元素左右都有2px margin，即使我使用margin: 0，我也必须使用margin: 0px -2px来“修复”它

以下是原始代码段

ul,
li {
    margin:0;
    padding:0;
}
nav{
    background:#333;
}
nav ul{
    text-align: center;
}
nav ul li{
    display:inline-block;
    list-style:none;
}
nav ul li a{
  background: green;
    color:#fff;
    padding:15px;
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
}

<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">home2</a></li>
        <li><a href="#">home3</a></li>
        <li><a href="#">home4</a></li>
    </ul>
</nav>

Answer 1

使用display: inline-block时元素会创建一个空格，因为它是内联的，所以你需要修复那个空间，

有few ways来修复这个空间：

删除空格
使用html评论
负边际（我个人不建议使用）
跳过HTML5允许的结束标记（再次个人建议不要使用）
将font-size设为零
设置float
使用flexbox

对于此代码，您可以在父font-size:0中使用ul，因为您已在子font-size中设置a

＆＃13;

ul,
li {
  margin: 0;
  padding: 0;
}
nav {
  background: #333;
}
nav ul {
  text-align: center;
  font-size:0
}
nav ul li {
  display: inline-block;
  list-style: none;
}
nav ul li a {
  background: green;
  color: #fff;
  padding: 15px;
  display: block;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">home</a>
    </li>
    <li><a href="#">home2</a>
    </li>
    <li><a href="#">home3</a>
    </li>
    <li><a href="#">home4</a>
    </li>
  </ul>
</nav>

＆＃13;

li元素的未知边距

1 个答案: