css - 1px 的未关联边距

Question

所以我正在构建一个导航栏并使用百分比来选择 CSS 中每个元素的宽度。问题是，即使我将百分比加起来为 100%(5 个按钮为 18.8%，5 个 1% margin-rights 和 1% margin-left。)我仍然让它们不对齐。

As you can see here当我检查 chrome 中的元素时，您会看到一小块未考虑的边距。

这是我的 HTML

<nav class="navigation">

<ul class="navbtn section">
<li class="leftest"><a href="#whatido"><div class="link-text">What I do</div></a></li>
<li><a href=""><div class="link-text">who I am</div></a></li>
<li><a href=""><div class="link-text">Web Work</div></a></li>
<li><a href=""><div class="link-text">design work</div></a></li>
<li><a href=""><div class="link-text">Illustration</div></a></li>
</ul>

</nav>

还有我的 CSS

.navigation
    {margin:auto;
    margin-top:50px;
    width: 50%;
    border:3px solid #c5c5c5;
    padding: 0.5% 0%;
    }

ul{
    margin:auto;
    padding:0px;
    }

ul li{
    display:inline-block;
    text-decoration: none;
    width:18.8%;
    margin-right:1%;
    }


li a{
    display:block;
    text-decoration: none;
    text-align:center;
    font-size:2vw;
    color:#ffffff;
    height:50px;
    background-color:#c5c5c5; 
    }

.link-text{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

li a:hover{
    background-color:#979797;
    }
.leftest{
    margin-left: 1%;
    }

非常感谢任何帮助，谢谢。

Answer 1

问题是 display: inline-block。由于列表项之间的空白，它导致了四个像素的空间。

您有几种解决方案:

1) 去掉空格

<nav class="navigation">
    <ul class="navbtn section">
        <li class="leftest">
            <a href="#whatido"><div class="link-text">What I do</div></a>
        </li><li>
            <a href=""><div class="link-text">who I am</div></a>
        </li><li>
            <a href=""><div class="link-text">Web Work</div></a>
        </li><li>
            <a href=""><div class="link-text">design work</div></a></li><li><a href=""><div class="link-text">Illustration</div></a>
        </li>
    </ul>
</nav>

DEMO

2) 为列表项添加负边距

ul li{
    display:inline-block;
    margin-left: -4px; /* added this line */
    text-decoration: none;
    width:18.8%;
    margin-right:1%;
}

DEMO

3) 使用 float 而不是内联 block

因此，您还需要在父级上设置溢出，以便列表项不会流出父级，并且您需要禁用列表样式。

ul{
    margin:auto;
    padding:0px;
    overflow: auto; /* added this line */
}

ul li{
    /* display: inline-block; remove this line */
    list-style: none; /* added this line */
    float: left; /* added this line */
    text-decoration: none;
    width:18.8%;
    margin-right:1%;
}

DEMO

4) 使用 CSS 表格

这样，单元格永远不会超过一行。

ul{
    margin:auto;
    padding:0px;
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}

ul li{
    display: table-cell;
    text-decoration: none;
}

DEMO