Question

所以我正在构建一个导航栏并使用百分比来选择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。由于列表项之间存在空白，因此会产生四个像素的空间。

您有几种解决方案：

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而不是inline 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

Answer 2

我认为这样做效果更好。

将这些行添加到css：

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

也可以在最后<li></li>之后将此行添加到您的HTML中：

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

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

1px的无差异保证金

2 个答案: