html - ul の最後の要素は次の行に移動します

Question

私の ul リストでは、最後の要素が次の行に移動します。すべての li 要素を 1 つの行に配置したい。次に、ブラウザを小さくすると、ログイン リンクが ul に近づくと、(ログイン リンク) も次の行に移動します。一列に並べたい。

ここに私のコードjsfddleがあります

Answer 1

システムを混乱させる可能性があるすべてをフロートします。

ul からフロートを削除して、使用可能な幅をすべて占有するようにします。また、ログイン リンクを ul の右側に配置するには、ログイン リンクを ul の上に配置します。

更新された jsFiddleを参照してください。

Answer 2

widthcss でメニュー コンテナを設定する必要があります。

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

JSフィドル

Answer 3

コードにいくつかの更新を行いました：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;
}?

Answer 4

float: left;削除は どうですか overflow: auto;

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

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

Answer 5

ここmargin-right:5px;の代わりにJSFIDDLEを設定するだけです。2%