html ve css ile inline gitmek için bir menü almaya çalışıyor

Question

Bir liste kullanarak html içinde bir menü listesi oluşturdum, listeyi bir div adında bir menüye ekledim. Benim css'de ekran ekledim: satır içi listeyi görüntülemek için listeyi yapmaya çalışmak için satır içi, normalde bu çalışır ancak bazı nedenlerle işe yaramaz. İşte

yalnızca yüzden css değiştirmek tek :)

beri Sen UL değil ül li ekran satır içi koymak gerekir benim Kod

#menu ul { 
 
    width: 100px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: inline; 
 
}

<div id="menu"> 
 

 
    <ul> 
 

 
    <li><a href="index.php">Home</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="about.php">About Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="Specials.php">Specials</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="terms.php">Terms</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="contact.php">Contact Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 

 
    </ul> 
 

 
</div>

Answer 1

olduğunu Buna:

#menu ul li 
{ 

width: 100px; 
position: absolute; 
z-index: 1; 
background: white; 
padding-top: 20px; 
margin: 0; 
padding: 0; 
list-style:none; 
display:inline; 
} 

Answer 2

liste öğelerinin satır içi olmak istiyorsanız:

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

veya

#menu ul li{float:left;} 

veya

#menu ul li{display:inline;} 

Ama 2n seçeneği için şamandıra Clearfix unutmayın.

Answer 3

display: inline'u li'a uygulamanız gerekir. Ayrıca position: absolute

ul den

#menu ul { 
 
    width: 100px; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
#menu ul li { 
 
    display: inline; 
 
}

<div id="menu"> 
 

 
    <ul> 
 

 
    <li><a href="index.php">Home</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="about.php">About Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="Specials.php">Specials</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="terms.php">Terms</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="contact.php">Contact Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 

 
    </ul> 
 

 
</div>

Answer 4

deneyin sonraki kodu kaldırmak, sizin için çalışacaktır. &nbsp'u kaldırdım ve kuralları li öğesine uygulamak için css'yi güncelledim.

#menu li 
 
{ 
 
    width: 100px; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 10px; 
 
    list-style:none; 
 
    display:inline; 
 
}

<div id ="menu"> 
 

 
<ul> 
 
    
 
<li><a href="index.php">Home</a></li> 
 
<li><a href="about.php">About Us</a></li> 
 
<li><a href="Specials.php">Specials</a></li> 
 
<li><a href="terms.php">Terms</a></li> 
 
<li><a href="contact.php">Contact Us</a></li> 
 

 
</ul> 
 

 
</div>

O yardımcı olur umarım: D

Answer 5

yerine ul li seçmek koymak zorunda. Ayrıca ul'inizin yayılmasına izin vermeyen ul'inde 100px'lik bir genişliğin var.

#menu ul { 
    position: absolute; 
    z-index: 1; 
    background: white; 
    padding-top: 20px; 
    margin: 0; 
    padding: 0; 
    list-style:none; 
} 

#menu ul li { display: inline; } 

ait