如何制作元素（<a>) stretch to the full width of its parent element (container)?</a>

Question

我做了一个响应式菜单：

http://jsfiddle.net/7vmCZ/2/

<ul id="nav">
    <li>Menu 1
        <ul>
            <li><a href="/">Menu 111</a></li>
            <li><a href="/">Menu 22</a></li>
            <li><a href="/">Menu 3333</a></li>
            <li>Menu 44
                <ul>
                    <li><a href="/">Menu 111111</a></li>
                    <li><a href="/">Menu 22</a></li>
                    <li><a href="/">Menu 3333</a></li>
                    <li><a href="/">Menu 44</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/">Menu 2222</a></li>
    <li>Menu 33<ul><li>This submenu should be under Menu33</li></ul></li>
        <li><a href="/">Menu 4444444</a></li>
</ul>

a
{
    background-color: red;
}

#nav {
    display:table;
}
#nav > li {
    list-style:none;
    padding:0px 10px 0px 10px;
    border:1px #000 solid;
    position:relative;
    display:table-cell;
    width:1%;
}
#nav ul li {
    width: 100%;
    display:block;
    text-indent:10px;
    line-height:30px;
    margin-right:10px;
    border-top:1px #000 solid;
    border-bottom:1px #000 solid;
    border-left:none;
    border-right:none;
    background:#fff;
    position:relative;
    white-space:nowrap;
}
ul {
    display:none;
}
li:hover > ul {
    display:block;
    position:absolute;
    z-index:1000;
    border:1px #000 solid;
}
ul#nav > li:hover > ul {
    margin-left: -10px;
}
#nav > li ul li ul {
    left:100%;
    top:-2px;
    white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
    color:#fff;
    background:#000;
}
li, li a {
    color:#000;
    text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}

问题是，菜单是可点击的，标签不适合所有容器（这就是为什么我用红色突出显示）。如何躲闪它？

Answer 1

a {
  display: block;
}

也可以添加width: 100%;，

默认情况下，

<a>元素为display: inline，因此宽度仅与文本和添加到元素的任何填充一样宽。 display: block会占用可用的宽度。

如果您仍有问题，请不要忘记父元素的填充。孩子只能占用尽可能多的空间。父填充可以防止它一直延伸到父级的边缘。元素的边距也是如此。如果此处的a标记有边距，则会在其周围留出空间。

Answer 2

在这里

http://jsfiddle.net/SinisterSystems/7vmCZ/3/

li {
    text-align:center;
}
a
{
    background-color: red;
    display:block;
}

对于填充的BG，请使用display:block;

对于对齐方式，请定位li个项目。

如果您只想让自己的顶级列表项居中，请在所有text-align项上使用基本li，然后使用psuedo class来指导ul#nav的后代}。

ul#nav li {
    text-align:left;
}
ul#nav > li {
    text-align:center;
}