Elementy w DIV rozpoczynają nową linię

Potrzebuję twojej pomocy w kwestii HTML/CSS: Tworzę bardzo prostą stronę internetową, na której znajduje się pasek nawigacji składający się z "ul" zawierającego pięć "li". "Ul" ma 900 pikseli szerokości i znajduje się wewnątrz "div". Każde "li" ma szerokość 900/5 = 180 pikseli. Mimo to te elementy tworzą nową linię.Elementy w DIV rozpoczynają nową linię

To co Spodziewam (bardziej lub mniej): enter image description here

To co mogę uzyskać: enter image description here

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

To jest moja pierwszy plik CSS (standardowy plik CSS 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; 
}

To mój prawdziwy CSS file:

@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; 
}

Przepraszamy za długość tej wiadomości i dziękuję za odpowiedzi!

EDIT: oto jsFiddle

Źródło

2013-03-12 superpuccio

Przepraszam, w mojej niewiedzy nie znałem tej strony! Oto [jsFiddle] (http://jsfiddle.net/Yfs7r/) – superpuccio

Elementy, które są określone inline są wrażliwe na ich strukturę w kodzie HTML - jeśli zakomentuj white-space między <li> lub ręcznie usunąć białą przestrzeń menu będzie zgodnie z oczekiwaniami.

Inną opcją jest ustawienie font-size na <ul> na 0, a następnie ponowne zadeklarowanie żądanego rozmiaru czcionki dla <li>. Here to artykuł informacyjny, który omawia ten popularny problem i dodatkowe sposoby jego rozwiązania.

Źródło

2013-03-12 17:57:33 Adrift

Tak, blok inline może być uciążliwy. Zobacz także: http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html –

Doskonały, działa wspaniale, a link, który napisałeś, wyjaśnia problem bardzo mocno. Dziękuję Ci! – superpuccio

Zastosowanie float:left zamiast display:inline-block.

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

Źródło

2013-03-12 17:57:24

Ponadto prawdopodobnie będziesz musiał dodać 'przepełnienie: auto;' do rodzica 'ul', aby nie zwinąć. – John

... i upewnij się, że wyczyścisz swoje pływaki. –

Dziękuję, rozwiązanie z "float: left" i "overflow: auto" działa świetnie!Dodatkowe pytanie: czy możesz połączyć ze mną stronę, na której wyjaśniono, dlaczego jest zawalenie, jeśli nie używam "przepełnienia: auto"? – superpuccio

Ustawiłbym szerokość, jakiej chciałbyś dla każdego elementu nawigatora na <li>, a następnie ustaw <a> na width:100%;. I nie zapomnij o białej spacji, gdy korzystasz z bloku inline na liście nawigacji. Wszelkie dodatkowe spacje w kodzie HTML mogą dodać kilka dodatkowych pikseli odstępu wokół elementów wbudowanego bloku.

Źródło

2013-03-12 18:03:11 Galen

Zamiast pracować w pływaki jak inni sugerowane (które są niekiedy dość irytujące, ponieważ muszą być rozliczone później) można również usunąć spacji między pozycji menu tak:

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

Źródło

2013-03-12 18:07:26 user2019515

Działa wspaniale, dziękuję! – superpuccio

Elementy w DIV rozpoczynają nową linię

Odpowiedz

Powiązane problemy