CSS菜单项全宽

Question

我正在尝试使以下网站上的菜单链接（在“菜单”下）填充栏的整个宽度。所以，当你有＆＃34;汤＆amp;沙拉＆＃34;作为活动，它一直延伸到蓝色条的左侧。当您将鼠标悬停在活动状态旁边的链接上时，块之间也应该没有空格。

http://www.woodonwellington.com/

ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;

}

#menuNav li
{
display: inline;
list-style-type: none;

}

#menuNav a { 
padding-top: 13px; 
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;

}

Answer 1

这是因为您的li设置为display:inline;在您的代码中，您在<li></li>块之间有一个输入和几个空格/制表符。要解决此问题，您必须在彼此之后立即编写标签。您希望限制这些<li>标记之间的空间。

取而代之的是：

<ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</ul>

这样做：

<ul>
    <li>
        Content
    </li><li>
        Content
    </li><li>
        Content
    </li>
</ul>

回答评论：

链接本身也出现了同样的问题。正如您在下面的图像中看到的那样，您可以使li元素相互接触。

现在要让链接互相接触，你必须这样做。

而不是：

<li>
    <a>Link</a>
<li>

这样做：

<li><a>
    Link
</a><li>

这不是一个好的解决方案，但它会修复链接之间的间距。

Answer 2

你可以简单地删除显示：inline;在.css中添加float：left;

#menuNav li
{    
list-style-type: none;
background-color:red;
float:left;
}

这将删除所有空格。

检查一下 http://jsfiddle.net/BishanMeddegoda/30w56oft/

Answer 3

您可以使用display：table / table-cell来完成此操作：

要应用的基本CSS：

#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}

从CSS中删除所有浮动来测试它。 float kill显示（除非设置为flex，但这是另一种选择）