1px 的未关联边距

Question

所以我正在构建一个导航栏并使用百分比 select CSS 中每个元素的宽度。问题是，即使我将百分比加起来为 100%（5 个按钮为 18.8%，5 个 1% 的边距右边和 1% 的边距左边。）我仍然让它们不对齐。

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。由于列表项之间的白色 space，它导致来自四个像素的 space。

您有几种解决方案：

1)去掉白色space

<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) 使用浮点数代替行内块

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

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

Answer 2

我觉得这样效果更好。

将这些行添加到 css :

nav.navigation ul li {
    float:left;
}
.clearfix {
    clear:both;
}

在最后一个 <li></li>:

之后立即将此行添加到您的 HTML

<div class="clearfix"></div>

现场演示：http://jsfiddle.net/c5ovhfou/

1px 的未关联边距

1px of unassosiated margin

css

margin