ul中的最后一个元素进入下一行

在我的ul列表中，最后一个元素进入下一行。我想要一行中的所有li元素。其次，当我使浏览器变小时，当登录链接接近ul时，它（登录链接）也会转到下一行。我希望他们成为一排。ul中的最后一个元素进入下一行

这里是我的代码jsfddle

来源

2012-06-27 2619

你漂浮一切，这可能会混淆系统。

如何从ul中移除浮动块，因此它将占用所有可用的宽度。为了让登录链接保持在ul的右侧，您可以将登录链接放在ul的上方。

请参阅updated jsFiddle。

来源

2012-06-27 06:14:27

Mr Listner，它现在可以工作，但为什么菜单显示在徽标的顶部。我希望菜单以及登录链接与标识相比垂直显示。 – 2619

这是一个完全不同的问题！恐怕你必须重新调整你的整个菜单。目前，ul和img在不同的div中，所以它们互不影响。 –

那么最好的做法是将它们放在一个div还是单独放置？ – 2619

有关删除float: left;和overflow: auto;

.header-container .header ul { 
    border: 1px solid green; 
}

http://jsfiddle.net/QupAV/6/

来源

2012-06-27 06:11:46 F0G

然后UL的高度变为零 – 2619

我想你可以设置最小高度。 – F0G

你必须设置菜单容器width在CSS：

/* line 23, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header ul { 
    float: left; 
    width:80%; 
    overflow: auto; 
    border: 1px solid green; 
}

JSfiddle

来源

2012-06-27 06:13:28

刚刚设置的margin-right:5px;，而不是2%
这里是JSFIDDLE。

来源

2012-06-27 06:20:01 khurram

进行了一些更新您的代码：http://jsfiddle.net/QupAV/22/

这里的结构：

<div class='header-container'> 
    <div class='header'> 
    <div class='logo'> 
     <img src='assets/logo.png'> 
    </div> 
    <div class='menu'> 
     <ul> 
     <li> 
      <a href='#'>Home</a> 
     </li> 
     <li> 
      <a href='#'>Features</a> 
     </li> 
     <li> 
      <a href='#'>Pricing</a> 
     </li> 
     <li> 
      <a href='#'>Team</a> 
     </li> 
     <li> 
      <a href='#'>Support</a> 
     </li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
    <a href='#'>Login</a> 
    <div class="clear"></div> 
    </div> 
</div> 
<div class='container'></div> 
<div class='footer'></div>?

这里是CSS：

.clear { clear: both; float: none; font-size: 0px; } 

/* line 1, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container { 
    width: 100%; 
    min-height: 15%; 
    background: url(menubg.jpg) no-repeat; 
} 
/* line 10, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header { 
    margin: 0 auto; 
    padding: auto; 
    border: 1px solid red; 
} 
/* line 16, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header .logo { 
    border: 1px solid orange; 
    display: block; 
    margin-right: 2%; 
    float: left; 
} 
/* line 23, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header .menu { 
    float: left; 
    border: 1px solid green; 
    width: 82%; 
} 

.header-container .header .menu ul { 
    list-style-type:none; 
    margin: 0px; 
    padding: 0px; 
} 
/* line 27, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header ul li { 
    float: left; 
    border: 1px solid blue; 
    margin-right: 2%; 
} 
/* line 35, ../../app/assets/stylesheets/menu.css.scss */ 
.header-container .header a { 
    width: 10%; 
    float: left; 
}?

来源

2012-06-27 06:21:34

ul中的最后一个元素进入下一行

回答

相关问题