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

Question

我已经使用<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>

Answer 1

#nav {
  width: 100%;
  margin: 20px 0px 20px 0px;
}
#nav ul {
  padding: 12px 0px 12px 0px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
#nav ul li {
  display: inline;
  margin-left: 10px;
  width:50px;
  height:20px;
  line-height:20px;
  font-weight: bold;
  background-color: grey;
}

Answer 2

样式标签内的“a”标签（例如“li”标签）不会选择您设置的任何样式。他们想要自己的风格。您需要将所有“li”样式移动到“a”标签，然后放置一个 display:block; 在'a'标签上。

Answer 3

a {

  display: block;

  // then whatever other rules you want to apply: width, height, border, pink flowers, etc

}