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

スタイル付きタグ (「li」タグなど) 内の「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

}