css - 在无序列表旁边剩余的宽度上跨越 div？

Question

<div class="nav">
    <ul class="nav">
        <a class="nav" href="#">
            <li class="nav">item1</li>
        </a>
        <a class="nav" href="#">
            <li class="nav">item2</li>
        </a>
        <a class="nav" href="#">
            <li class="nav">item3</li>
        </a>
    </ul>
    <div class="line"></div>
</div>

这是我的 HTML 导航栏

CSS:

ul.nav {
    display: inline-block;
    font-size: 0;
}

li.nav {
    display:inline-block;
    border-bottom: 2px solid gray;
    padding: 15px 20px;
    text-align: center;
    font-size: 16px;
}
div.nav {
    width: 100%;
    display: inline-block;
}

我如何设置 div.line 的样式，使其恰好位于列表旁边(右)，填充页面的其余部分(宽度)并具有与 ul.nav/div.nav 相同的高度？

谢谢，

Answer 1

首先，对英语水平感到抱歉!

你可以这样做:

.line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
 }

例如:http://jsfiddle.net/X8fE4/

基本上就是将 div.line 变成导航背后的绝对元素。它将具有父 div.nav 的宽度，这不是一个漂亮的解决方案，但得到了很好的支持:)