用倒数第二个Li填充UL Space？

Question

I have been trying to get this to work for about 2 days now, but i can get nothing. 我一直在尝试使它工作大约2天，但是我什么也收不到。 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. 在最后一个和倒数第二个li之间留了很多空间。 How can i make that second to last li fill up the ul? 我如何才能让倒数第二的李补足你的ul？ I already tried to treat it as a table, but that did not work. 我已经尝试将其视为表，但这没有用。 Here is some of my css: 这是我的一些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. 这是我需要发生的事情。 在此处输入图片说明

The News li need to grow to fill up space in between it and the login li. News li需要增长以填充它和登录li之间的空间。

Answer 1

Is there a reason you are floating the last li right instead of left? 您是否有理由将最后一个li浮动而不是浮动？ If you keep the floats left you shouldn't have the spacing problem. 如果您保持浮子不动，就不会出现间距问题。

If this doesn't help, I think you're going to need to give more details as to what you want to accomplish. 如果这没有帮助，我认为您将需要提供更多关于您要完成的工作的细节。

Okay, I suspect there's more that you haven't yet told us, but take a look at this quick and dirty sample and let me know how close it comes to your goal: 好的，我怀疑您还没有告诉我们更多信息，但是请看一下这个快速而肮脏的示例，让我知道它离您的目标有多近：

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

The background colors are just to help us see what's happening. 背景颜色只是为了帮助我们了解发生了什么。

用倒数第二个Li填充UL Space？

问题描述

1 个解决方案

解决方案1
0 2013-06-19 19:16:10

用倒数第二个Li填充UL Space？

问题描述

1 个解决方案

解决方案1 0 2013-06-19 19:16:10

解决方案1
0 2013-06-19 19:16:10