l'ultimo elemento in ul passa alla riga successiva

nella mia lista ul l'ultimo elemento passa alla riga successiva. Voglio tutti gli elementi li su una riga. E in secondo luogo, quando ridurrò il mio browser, quando il collegamento di accesso si avvicina a ul, anche questo (collegamento di accesso) passerà alla riga successiva. Voglio che siano in una fila.l'ultimo elemento in ul passa alla riga successiva

Ecco il mio codice jsfddle

fonte

2012-06-27 2619

Si galleggia tutto, che può confondere il sistema.

Che ne dici di rimuovere il galleggiante dall'ullo, in modo che occupi tutta la larghezza disponibile. E per mantenere il link di accesso a destra dell'ul, è possibile inserire il link di login sopra l'ul.

Vedere updated jsFiddle.

fonte

2012-06-27 06:14:27

Signor Listner, funziona ora ma perché il menu viene visualizzato nella parte superiore del logo. Voglio che il menu e il link di accesso siano visualizzati verticalmente rispetto al logo. – 2619

Questa è una domanda completamente diversa! Temo che dovrai ristrutturare l'intero menu allora. Attualmente, ul e img sono in div diverse, quindi non hanno alcun effetto l'uno sull'altro. –

Quindi, qual è la migliore pratica, è bene metterli in un div o separati? – 2619

per quanto riguarda l'eliminazione di float: left; e overflow: auto;

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

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

fonte

2012-06-27 06:11:46 F0G

quindi l'altezza del ul diventa zero – 2619

credo che si può impostare l'altezza minima. – F0G

È necessario impostare la width di container menu css:

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

JSfiddle

fonte

2012-06-27 06:13:28

Basta impostare il margin-right:5px; invece di 2%
qui èJSFIDDLE.

fonte

2012-06-27 06:20:01 khurram

apportato alcuni aggiornamenti al codice: http://jsfiddle.net/QupAV/22/

Ecco la struttura:

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

Ecco i 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; 
}?

fonte

2012-06-27 06:21:34

l'ultimo elemento in ul passa alla riga successiva

risposta

Problemi correlati