0

I have been trying to get this to work for about 2 days now, but i can get nothing. Here is my layout. I have a navbar with some elements, and the last one is floating right. This leaves a lot of space left between the last and the second to last li. How can i make that second to last li fill up the ul? I already tried to treat it as a table, but that did not work. Here is some of my 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;
}

If there is any more code you need, just tell me and i will post it. Thanks.

Here is what i need to happen. enter image description here

The News li need to grow to fill up space in between it and the login li.

4

1 回答 1

0

您是否有理由将最后一个 li 向右而不是向左浮动？如果你保持浮动，你不应该有间距问题。

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

好的，我怀疑您还没有告诉我们更多内容，但请看一下这个快速而肮脏的示例，让我知道它与您的目标有多接近：

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

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

于 2013-06-19T19:16:10.340 回答