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

这可能会对您有所帮助：

预览：http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/ 代码：http://jsfiddle.net/webcarvers/7uZgW/3/

JS：

$(document).ready(function(){
 $("div.two").css({
    //-2 is for border width
    "width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
        "height": ($("div.nav").height()-2) + "px"
});
});

Answer 2

首先，抱歉英语水平！

您可以执行以下操作：

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

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

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

Answer 3

div.nav {
 display: flex;
 display: ms-flex;
 display: -webkit-flex;
{

修改：您还需要将属性flex-grow添加到.line。

.line {
  flex-grow: 1;
}

http://jsfiddle.net/eWHnU/

在无序列表旁边跨越div宽度？

3 个答案: