Elementi in DIV iniziano una nuova riga

Ho bisogno del tuo aiuto in un problema HTML/CSS: sto creando una semplice pagina web in cui è presente una barra di navigazione composta da un "ul" contenente cinque "li". "Ul" è largo 900 px ed è all'interno di un "div". Ogni "li" è 900/5 = 180 px di larghezza. Nonostante ciò, quegli elementi creano una nuova linea.Elementi in DIV iniziano una nuova riga

Questo è ciò che mi aspetto (più o meno): enter image description here

Questo è ciò che ottengo: enter image description here

Questa è la HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>My First Website</title> 
<link rel="stylesheet" type="text/css" href="css/reset.css"> 
<link rel="stylesheet" type="text/css" href="css/princstyle.css"> 
</head> 

<body> 
<div id="container"> 
    <div id="fascia"> 
     <h1>My First Website</h1> 
    </div> 
    <hr class="menu"> 
    <div id="nav"> 
     <ul> 
      <li><a href="img/a.jpg">About</a></li> 
      <li><a href="img/b.jpg">Photo</a></li> 
      <li><a href="img/c.jpg">News</a></li> 
      <li><a href="img/d.jpg">Video</a></li> 
      <li><a href="img/e.jpg">Contacts</a></li> 
     </ul> 
    </div> 
    <hr class="menu"> 
</div> 

</body> 
</html>

Questo è il mio primo file CSS (un file CSS standard di reset):

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

Questa è la mia vero file CSS:

@charset "utf-8"; 
/* CSS Document */ 


body 
{ 
    background-color:#363636; 
    background-image:url(../img/noise.png); 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#container 
{ 
    position:relative; 
    width:1000px; 
    height:700px; 
    margin:0 auto; 
} 

#fascia 
{ 
    width:950px; 
    padding:25px; 
    font-size:4em; 
    position:relative; 

} 

html 
{ 
    height:100%; 
} 

h1,h2,h3,h4,h5,h6,p{ 
    color:#FFF; 
    font-family:Arial,Helvetica,sans-serif; 
    text-align:center; 
} 

hr.menu 
{ 
    margin:0; 
} 

#nav 
{ 
    width:100%; 
    position:relative; 
} 

#nav ul 
{ 
    width:900px; 
    margin:0 auto; 
} 

#nav ul li 
{ 
    display:inline-block; 
} 


#nav ul li a 
{ 
    display:block; 
    width:180px; 
    font-weight:bold; 
    color:#FFF; 
    text-transform:uppercase; 
    text-align:center; 
    text-decoration:none; 
    padding:5px 0; 
} 


#nav ul li a:hover 
{ 
    background-color:#C09; 
}

Scusate per la lunghezza di questo messaggio e grazie per tutte le risposte!

EDIT: Ecco l'jsFiddle

fonte

2013-03-12 superpuccio

Scusa, nella mia ignoranza non conoscevo quel sito! Ecco [jsFiddle] (http://jsfiddle.net/Yfs7r/) – superpuccio

Elementi che sono previste in linea sono sensibili alla loro struttura nel codice HTML - se si commento la white-space tra <li> o rimuovere manualmente lo spazio bianco il menu si allineerà come previsto.

Un'altra alternativa è impostare font-size su <ul> su 0 e quindi ripetere la dimensione del carattere desiderata per lo <li>. Here è un articolo informativo che illustra questo problema popolare e altri modi per risolverlo.

fonte

2013-03-12 17:57:33 Adrift

Sì, il blocco in linea può essere un dolore. Vedi anche: http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html –

Perfetto, funziona alla grande e il link che hai scritto spiega molto bene il problema. Grazie! – superpuccio

Uso float:left invece di display:inline-block.

#nav ul li 
{ 
    display:inline-block; <-- here 
}

fonte

2013-03-12 17:57:24

Inoltre, è probabile che tu debba aggiungere "overflow: auto;" al padre 'ul', in modo che non collassi. – John

... e assicurati di cancellare i tuoi galleggianti. –

Grazie, la soluzione con "float: left" e "overflow: auto" funziona alla grande!Un'ulteriore domanda: puoi collegarmi a un sito in cui viene spiegato perché c'è un collasso se non utilizzo "overflow: auto"? – superpuccio

Vorrei impostare la larghezza desiderata per ogni articolo di navigazione su <li> quindi impostare il . E non dimenticare lo spazio bianco quando utilizzi il display inline-block sulla lista nav. Eventuali spazi aggiuntivi nel codice HTML possono aggiungere alcuni pixel in più di spaziatura attorno agli elementi del blocco in linea.

fonte

2013-03-12 18:03:11 Galen

Invece di lavorare con i galleggianti come gli altri hanno suggerito (che sono a volte piuttosto fastidioso perché hanno bisogno di essere cancellata in seguito) si potrebbe anche rimuovere i vostri spazi bianchi tra le voci di menu in questo modo:

<div id="nav"> 
    <ul> 
     <li><a href="img/a.jpg">About</a></li><li><a href="img/b.jpg">Photo</a></li><li><a href="img/c.jpg">News</a></li><li><a href="img/d.jpg">Video</a></li><li><a href="img/e.jpg">Contacts</a></li> 
    </ul> 
</div>

JSFiddle: http://jsfiddle.net/QNb2j/1/

fonte

2013-03-12 18:07:26 user2019515

Funziona benissimo, grazie! – superpuccio

Elementi in DIV iniziano una nuova riga

risposta

Problemi correlati