Question

当我尝试创建一个按钮时，如果使用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;
}

当我打开浏览器并访问它时，结果是一个糟糕的按钮，没有点击字符串外部的功能。怎么可行？

感谢。

Answer 1

请尝试以下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;
}

Answer 2

这是我的解决方案。

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);
}

Answer 3

代码自我有点不对，这是你必须使用的。把它放在你的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;
}

Answer 4

要创建按钮链接，在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;
}

如何在CSS3中的导航栏上创建按钮链接？

4 个答案: