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

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

谢谢

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;
}

编辑：您还需要添加属性flex grow to.line

这可能会帮助您：

预览： 代码：

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"
});
});

e、 g:

---

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

您能提供一个它应该是什么样子的图像吗？我为您创建了一个提琴：如果我使用建议的样式，我的div.line与整个页面的高度相同，不仅仅是div.nav？为什么？div.line与父元素div.nav的高度相同。请注意，父元素div.nav的位置应为：relative。如何更改此代码，使其自动刷新？虽然调整浏览器的大小在小提琴中效果很好，但当尝试使用它时，我得到：uncaughtreferenceerror:$未定义，我应该如何将其嵌入html文件中？我需要jquery吗？添加了jquery，它几乎可以工作，但我仍然得到一个宽度：0，你能分享你的实时代码吗！我可以帮忙。你一定错过了什么。

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

.line {
  flex-grow: 1;
}

$(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"
});
});

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