Display: inline not working

Sono abbastanza nuovo per html e css.Display: inline not working

Ho imparato le basi e alcune tecniche avanzate ma, ho avuto un problema con le liste per molto tempo e vorrei sapere come posso risolvere il mio problema.

Ecco l'idea.

Sto facendo un negozio online ma voglio evitare di posizionare ogni singola immagine, testo, link usando un id differente.

Ho avuto questa idea, avrei messo il mio li in un div in modo che tutto, all'interno del mio elenco sarebbe rimasto bloccato in questa scatola, fare una classe posizionando il mio testo, collegamenti, immagini correttamente, utilizzare display: inline ed et voilà, posso creare un'intera pagina di prodotti usando solo una classe.

Il problema è visualizzato: in linea non funziona.

Sarei davvero grato se qualcuno potesse darmi una mano su questo.

Questo è un cattivo esempio ma, si capisce il principio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;} 
    .nav_button {background-color:purple;width:100px;height:50px;} 
    .nav_button:hover {background-color:pink;} 
    .nav_button li {display:inline;} /* Not working ?!? */ 
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;} 
</style> 
</head> 

<body> 
    <table style="width:600px;margin:0 auto;"> 
     <tr> 
      <td> 
       <ul id="nav_bar"> 
        <div class="nav_button"> <li> <a href="#">Home</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">About us</a> </li> </div> 
       </ul> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

fonte

2012-08-15 Dany

display:inline è molto limitato e non consente alcun livello di blocco styling aggiunto ad essa. Stai meglio usando display:inline-block o usando float:left. Tenere presente che se si utilizzano float, è necessario impostare l'overflow dell'elemento padre su overflow:auto (utilizzare visibile per IE < 8) e questo dovrebbe funzionare. Usa prima il blocco inline.

fonte

2012-08-15 03:35:43 matsko

Funziona, .nav_button li {} non era necessario, tutto ciò che dovevo fare era usare float: lasciato dentro .nav_button. Dolce, la mia idea ha funzionato dopo tutto – Dany

Il motivo per cui non funziona è perché lo si utilizza insidea a div e che l'elemento div ha solo l'elemento li, la proprietà inline funzionerebbe se si ha più di un elemento li sotto un div.

provare questo

<ul id="nav_bar"> 
    <li class="nav_button"> <a href="#">Home</a> </li> 
    <li class="nav_button"> <a href="#">Contact us</a> </li> 
    <li class="nav_button"> <a href="#">Shipping</a> </li> 
    <li class="nav_button" > <a href="#">About us</a> </li> 
</ul>

e per css

#nav_bar .nav_button {display:inline-block;}

o in alternativa si può anche utilizzare:

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

se si utilizza il metodo float assicurarsi che si sta utilizzando un elemento specificato con clear:both; alla fine.

fonte

2012-08-15 03:37:18 Amyth

nota che: se la larghezza dell'elemento genitore è troppo breve per visualizzare horizantally poi

ul { 
width: 20px; 
} 
li 
{ 
display: inline; 
}

non funzionerà.

anche sotto l'elemento li se è visualizzato: blocco; dichiarazione come

li 
{ 
display: inline; 
} 
li a{ 
display: block; 
}

non funziona.

fonte

2016-11-04 17:25:51 Emre

risposta

Problemi correlati