DIV içindeki öğeler yeni bir satır başlat

Bir HTML/CSS sorununda yardımınıza ihtiyacım var: Beş "li" içeren bir "ul" içeren bir gezinti çubuğu bulunan çok basit bir web sayfası oluşturuyorum. "Ul" 900px genişliğinde ve bir "div" içinde. Her "li" 900/5 = 180 piksel genişliğindedir. Buna rağmen, bu unsurlar yeni bir çizgi yaratır. DIV içindeki öğeler yeni bir satır başlat

beklediğim budur (az ya da çok):

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

Bu HTML geçerli: enter image description here

Bu ben elde budur

Bu benim ilk CSS dosyası (reset Standart CSS dosyası):

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

Bu benim gerçek CSS dosyası geçerli:

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

Bu mesajın uzunluğu için üzgünüm ve herhangi cevaplar için teşekkür ederim! DÜZENLEME

: - Eğer beyaz boşluk açıklama varsa buradajsFiddle

kaynak

2013-03-12 superpuccio

Üzgünüm, cehaletimde bu siteyi bilmiyordum! Burada [jsFiddle] (http://jsfiddle.net/Yfs7r/) – superpuccio

Elemanları olduğunu <li> arasında veya beyaz boşluk el ile kaldırıldığında menü beklendiği gibi sıraya girecek.

Diğer bir seçenek <ul>font-size değerini 0 olarak ayarlamak ve <li> 's için istenen yazı tipi boyutunu yeniden bildirmektir. Here, bu popüler sorunu ve bunu çözmek için ek yolları tartışan bilgilendirici bir makaledir.

kaynak

2013-03-12 17:57:33 Adrift

Yup, satır içi blok bir ağrı olabilir. Ayrıca bkz .: http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html –

Mükemmel, harika çalışıyor ve yazdığınız link çok açık bir şekilde problemi açıklıyor. Teşekkür ederim! – superpuccio

Kullanım float:left yerine inline koydu HTML'nize kendi yapısına duyarlıdır olan display:inline-block.

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

kaynak

2013-03-12 17:57:24

Buna ek olarak, büyük olasılıkla "taşma": auto işlevini "ul" olarak eklemeniz gerekecek, böylece çökmez. – John

... ve şamandıralarınızı temizlediğinizden emin olun. –

Teşekkür ederiz, "float: left" ve "overflow: auto" ile çözüm harika çalışıyor!Ek bir soru: "overflow: auto" kullanmazsam neden bir çöküşün olduğunu açıklayan bir siteyi bana bağlayabilir misiniz? – superpuccio

Her bir nav öğesi için istediğiniz genişlik değerini <li> sonra ayarladıktan sonra <a> öğünüzü width:100%; olarak ayarlayın. Ayrıca, nav listesindeki satır içi bloğu kullanırken beyaz alanı da unutmayın. HTML'nizdeki fazladan boşluklar, satır içi blok öğelerinizin etrafında birkaç boşluk daha ekleyebilirsiniz.

kaynak

2013-03-12 18:03:11 Galen

Aksine başkalarının önerdi gibi yüzen birlikte çalışmak yerine (ki bunlar sonradan temizlenmesi gerekir çünkü bazen oldukça rahatsız edici) Bunu da çok sevdiği menü öğeleri arasında beyaz boşlukları kaldırın olabilir:

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

kaynak

2013-03-12 18:07:26 user2019515

Harika çalışıyor, teşekkürler! – superpuccio

DIV içindeki öğeler yeni bir satır başlat

cevap

İlgili konular