Ekran: satır içi çalışmıyor

Ben html ve css için oldukça yeni.Ekran: satır içi çalışmıyor

Temelleri ve birkaç ileri teknikleri öğrendim ancak uzun zamandır listelerinde bir sorunla karşılaştım ve sorunumu nasıl düzelteceğimi bilmek istiyorum.

İşte fikir.

Bir çevrimiçi mağaza yapıyorum ancak farklı bir kimlik kullanarak her bir görüntüyü, metni, bağlantıyı konumlandırmaktan kaçınmak istiyorum.

Bu fikre sahip olduğum için, li'yi bir divun içine koyacağım, böylece listemdeki her şey bu kutunun içinde sıkışmış olacak, metnimi, linkleri, görüntüleri düzgün bir şekilde konumlandıracak bir sınıf hazırlayacaktır: display: inline ve et voila, sadece bir sınıf kullanarak ürünlerin tüm sayfasını oluşturabilirim.

Sorun görüntüleniyor: satır içi çalışmıyor.

Birisi bana bu konuda yardımcı olabilir eğer gerçekten çok memnun olurum.

Bu kötü bir örnektir, ancak prensibi anlıyorsunuz.

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

kaynak

2012-08-15 Dany

display:inline çok sınırlıdır ve buna eklenen bir blok düzeyi stil izin vermez. display:inline-block'u kullanmadan veya float:left'u kullanmadan daha iyisin. Eğer şamandıralar kullanıyorsanız, üst öğenin taşma değerini overflow:auto (IE < 8 için görünür halde kullan) olarak ayarlamanız gerektiğini ve bunun işe yarayacağını unutmayın. İlk olarak satır içi bloğu kullanın.

kaynak

2012-08-15 03:35:43 matsko

Çalışıyor, .nav_button {} gereksizdi, tüm yapmak zorunda olduğum float kullanıyorum: left .nav_button içinde. Tatlım, benim fikrim her şeyden sonra çalıştı – Dany

Çalışmamanın sebebi, onu bir div olarak kullandığınız ve div öğesinin yalnızca li öğesine sahip olduğu, bir satırın altında birden çok li öğeniz varsa, satır içi özelliğin çalışacağıdır.

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

ve css için

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

veya alternatif de kullanabilirsiniz deneyin: Eğer float yöntemi kullanırsanız

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

Eğer bir eleman kullandığınızdan emin olun Sonunda clear:both; ile belirtilen. üst öğe genişliği horizantally görüntülemek için çok kısa ise o zaman

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

çalışmaz:

kaynak

2012-08-15 03:37:18 Amyth

not. Display: block; çalışmaz

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

kaynak

2016-11-04 17:25:51 Emre

Ekran: satır içi çalışmıyor

cevap

İlgili konular