el último elemento en ul pasa a la siguiente fila

en mi lista ul, el último elemento va a la siguiente línea. Quiero todos los elementos li en una fila. Y en segundo lugar, cuando hago que mi navegador sea más pequeño, cuando el enlace de inicio de sesión se acerca a ul, también (enlace de inicio de sesión) pasa a la siguiente línea. Quiero que estén en una fila.el último elemento en ul pasa a la siguiente fila

Aquí está mi código jsfddle

Fuente

2012-06-27 2619

Usted flote todo, que pueden confundir el sistema.

¿Qué tal si quitamos el flotador del ul, por lo que ocupará todo el ancho disponible. Y para mantener el enlace de inicio de sesión a la derecha de la ul, puede colocar el enlace de inicio de sesión sobre el ul.

Ver updated jsFiddle.

Fuente

2012-06-27 06:14:27

Sr. Listner, funciona ahora pero por qué el menú se muestra en la parte superior del logotipo. Quiero que el menú y el enlace de inicio de sesión se muestren verticalmente en el centro en comparación con el logotipo. – 2619

¡Esa es una pregunta completamente diferente! Me temo que tendrás que reestructurar todo tu menú entonces. Actualmente, el ul y el img están en div diferentes, por lo que no tienen ningún efecto el uno sobre el otro. –

Entonces, ¿cuál es la mejor práctica? ¿Es bueno colocarlos en un div o separados? – 2619

lo que acerca de la eliminación float: left; y overflow: auto;

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

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

Fuente

2012-06-27 06:11:46 F0G

entonces la altura de UL se convierte en cero – 2619

Creo que se puede establecer min-height. – F0G

Usted tiene que fijar el contenedor de width menú de css:

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

JSfiddle

Fuente

2012-06-27 06:13:28

acaba de establecer la margin-right:5px; en lugar de 2%
aquí esJSFIDDLE.

Fuente

2012-06-27 06:20:01 khurram

hecho algunos cambios a su código: http://jsfiddle.net/QupAV/22/

Aquí está la estructura:

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

Aquí es el 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; 
}?

Fuente

2012-06-27 06:21:34

el último elemento en ul pasa a la siguiente fila

Respuesta

Cuestiones relacionadas