ostatni element w ul idzie do następnego rzędu

Question

na mojej liście ul ostatni element przechodzi do następnej linii. Chcę wszystkie elementy li w jednym wierszu. A po drugie, gdy zmniejszam przeglądarkę, a kiedy link logowania zbliża się do ul, to (łącze logowania) również przechodzi do następnej linii. Chcę, żeby były w jednym rzędzie.

Oto mój kod jsfddle

Answer 1

Ulatujesz wszystko,, co może wprowadzić w błąd system.

Co powiesz o usunięciu pływaka z ul, więc zajmie całą dostępną szerokość. Aby zachować link do logowania na prawo od ul, możesz umieścić link do logowania nad ul.

Zobacz updated jsFiddle.

Answer 2

co o usunięcie float: left; i overflow: auto;

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

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

Answer 3

Musisz ustawić width pojemnika menu w CSS:

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

JSfiddle

Answer 4

wystarczy ustawić margin-right:5px; zamiast 2%
tutaj jestJSFIDDLE.

Answer 5

Wykonane jakieś aktualizacje kodu: http://jsfiddle.net/QupAV/22/

Oto struktura:

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

Oto 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; 
}?