Question

我一直试图让它工作大约2天，但我什么也得不到。这是我的布局。我有一个带有一些元素的导航栏，最后一个是向右浮动的。这在最后一个和第二个之间留下了很多空间。我怎么能让第二个到最后李填满ul？我已经尝试将其视为一张桌子，但这不起作用。这是我的一些css：

.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
display: table;
width:100%;
}

.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
}

.NavBar > ul > li > a:hover {
background:#111;
}

.NavBar > ul > li:nth-last-child(2) {
list-style:inside none;
display:table-cell;
}

如果您需要更多代码，请告诉我，我会发布它。感谢。

这是我需要发生的事情。 enter image description here

新闻李需要增长以填补它与登录li之间的空间。

Answer 1

你有没有理由把最后一个李漂浮而不是离开？如果你留下浮子，你不应该有间距问题。

如果这没有帮助，我认为你需要提供更多有关你想要完成的细节。

好的，我怀疑还有更多你尚未告诉我们，但请看看这个快速而肮脏的样本，让我知道它与你的目标有多接近：

<html>
<head>
<style>

.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
width:100%;
}

.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
width: 10%;
background-color: #FFDDDD;
}

.NavBar > ul > li > a:hover {
background:#111;
}

.NavBar > ul > li:last-child {
float: right;
background-color: #DDFFDD;
}

.NavBar > ul > li:nth-last-child(2) {
width: 60%;
background-color: #DDDDFF;
}

</style>
</head>

<body>

  <nav class='NavBar'>
    <ul>
      <li>Widgets</>
      <li>Boojuns</>
      <li>Snarf</>
      <li>Xyzzy</>
      <li>Plugh</>
    </ul>
  </nav>

</body>

</html>

背景颜色只是为了帮助我们了解正在发生的事情。

用倒数第二个Li填充UL空间？

1 个答案: