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

样式标签内的标签（例如'li'标签）中的'a'标签将不会拾取您设置的任何样式。他们想要自己的风格。您需要将所有'li'样式移动到'a'标记，然后放置display：block;在'a'标签上。

Answer 3

a {

  display: block;

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

}

如何用CSS制作“按钮式外观”

3 个答案: