htmlとcssでインラインになるメニューを取得しようとしています

Question

私はリストを使ってhtmlでメニューリストを作成しました。私はメニューと呼ばれるdivにリストを追加しました。私のCSSでは、インラインでディスプレイを追加してリストをインラインで表示しようとしましたが、これは通常動作しますが何らかの理由で動作していないようです。ここで

は私のコードは、あなたが1つしかないので、ULはなく、あなたのUL李上の表示をインラインで配置する必要があり

#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

です:)

だからあなたのCSSを変更しますこれまで：

#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

あなたがリスト項目がインラインになりたい場合：

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

または

#menu ul li{float:left;} 

または

#menu ul li{display:inline;} 

しかし、2nのオプションのためのフロートをclearfixすることを忘れないでください。

Answer 3

display: inline〜liを適用する必要があります。また、次のコードを試してみてくださいul

#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

からposition: absoluteを削除し、それはあなたのために動作します。私は&nbspを削除し、CSSを更新してルールをli要素に適用しました。

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

私はそれが役に立てば幸い：D

Answer 5

があなたの代わりに、ULの李を選択し配置する必要があります。また、あなたのulに100pxの幅があり、それは李を広げさせません。

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

#menu ul li { display: inline; } 

の