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

这是我的解决方案。

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 回答
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 中创建按钮链接非常简单。以下代码将为您提供 html 以非常轻松地制作按钮链接。您还将添加一些 CSS。

HTML

<body>
   <nav>
      <button onclick="window.location.href='https://example.com'">Example</button>
    </nav>
</body>

CSS

body {
   background-color: black;
}

nav {
   background-color: white;
}

nav button {
   background-color: red;
   height: 30px;
}

nav button:hover {
   cursor: pointer;
   background-color: blue;
}
于 2018-08-07T19:09:28.960 回答