如何使用 CSS 制作"button-like appearance"

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

'a'标记不会拾取您设置的任何样式。他们想要自己的风格。您需要将所有的"li"样式移动到"a"标记，然后放置display:block；在"a"标记上。

Answer 2

#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 3

a {
  display: block;
  // then whatever other rules you want to apply: width, height, border, pink flowers, etc
}