5

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

这是我的代码jsfddle

4

5 回答 5

3

你浮动所有东西，这可能会混淆系统。

您如何从 ul 中删除浮动，这样它将占用所有可用宽度。并且要将登录链接保留在 ul 的右侧，您可以将登录链接放在 ul 上方。

请参阅更新的 jsFiddle。

于 2012-06-27T06:14:27.040 回答
1

您必须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-27T06:13:28.733 回答
0

删除 float: left;和 overflow: auto;

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

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

于 2012-06-27T06:11:46.207 回答
0

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

于 2012-06-27T06:20:01.273 回答
0

对您的代码进行了一些更新：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-27T06:21:34.627 回答