1

HTML5 と CSS3 を使用して、ナビゲーション バーの正確な文字列の外側にある場合でも、ボタンをクリックする機能を含むリンクが埋め込まれたボタンを作成しようとしたときに、希望どおりに作成できません。次のコードで何が欠けていますか?

HTMLファイル

<nav>
     <ul id='main_menu'> 
        <li><a href='/'>Home</a></li>
        <li><a href='/l1'>Link1</a></li>
        <li><a href='/l2'>Link2</a></li>
        <li><a href='/l3'>Link3</a></li>
    </ul>
</nav>

そして、CSSファイル

ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}

ブラウザを開いてアクセスすると、文字列の外側をクリックする機能がない、安っぽいボタンが表示されます。どのように実現可能ですか？

ありがとう。

4

4 に答える 4

2

以下のcssを試してください

ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}
于 2013-06-13T04:56:11.943 に答える
0

コード自体は少し間違っています。使用する必要があるのは次のとおりです。CSSシートに配置します

#main_menu ul{
list-style: none;
}

#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}

a{
text-decoration:none;
}

#main_menu li:hover{
background-color: green;
}
于 2013-06-13T04:50:14.190 に答える
0

これが私の解決策です。

HTML

<nav>
     <ul id='main_menu'> 
        <li><a href='/'>Home</a></li>
        <li><a href='/l1'>Link1</a></li>
        <li><a href='/l2'>Link2</a></li>
        <li><a href='/l3'>Link3</a></li>
    </ul>
</nav>

CSS

ul#main_menu {
    list-style:none;
}
ul#main_menu li {
display:inline-block;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 1px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
    text-decoration:none;
}
ul#main_menu li a:hover {
    background-color: rgb(150,150,150);
}
于 2013-06-13T04:46:56.467 に答える