html - 如何使用CSS制作“类似按钮的外观”

我已经使用<ul>和<li>制作了一个导航栏

我想使用边框，渐变等自定义每个标签。

应该在哪里使用？

我的CSS样式倾向于只影响字母，而不影响其他任何字母。

的CSS

#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}

#nav ul {
padding: 12px 0px 12px 0px;
border-top: solid black 1px;
border-bottom: solid black 1px;
}

#nav ul li {
display: inline;
margin-left: 50px;
font-weight: bold;
    background-color: grey;
}

的HTML

<div id="nav">
    <ul>
        <li>Home</li>
        <li>Files</li>
        <li>Info</li>
        <li>About</li>
    </ul>
</div>

最佳答案

样式标签（例如“ li”标签）内的“ a”标签将不会采用您设置的任何样式。他们想要自己的风格。您将需要将所有“ li”样式移至“ a”标签，然后放入display：block;。在“ a”标签上。

关于html - 如何使用CSS制作“类似按钮的外观”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12323651/