Question

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

这是我的代码jsfddle

Answer 1

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

如何从ul中移除浮动，因此它将占用所有可用宽度。要将登录链接保留在ul的右侧，您可以将登录链接放在ul。

之上

请参阅updated jsFiddle。

Answer 2

您必须在css：

中设置菜单容器的width

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

JSfiddle

Answer 3

如何删除float: left;和overflow: auto;

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

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

Answer 4

只需设置margin-right:5px;而不是2% 此处 JSFIDDLE。

Answer 5

对您的代码进行了一些更新：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;
}?

ul中的最后一个元素转到下一行

5 个答案: