1

リスト項目でナビゲーション バーを作成しようとしています。それらの周りに境界線を置き、リスト項目の周りの境界線のサイズを同じサイズにする方法を見つけようとしています。それらは常に、境界線内のテキストのサイズにちょうど合っているようです。申し訳ありませんが、私はウェブデザインに不慣れな質問です。

#nav {
  background-color: #000;
  height: 100px;
  padding-top: 20px;
}
li {
  display: inline;
  border: 1px outset #c4c4cc;
  background-color: #c4c4cc;
  font-family: Tahoma, Geneva, sans-serif bold;
  margin-left: 29px;
  font-weight: bold;
  padding: 12px;
}
<div id="nav">
  <ul>
    <li>About Us</li>
    <li>Contact Us</li>
    <li>Castings</li>
    <li>Machining</li>
    <li>Products</li>
    <li>Home</li>
  </ul>
</div>

4

3 に答える 3

0

これがまさにあなたが探しているものかどうかはわかりませんが、次の CSS を試してください:

#nav { 
  background-color: #000; 
  overflow: hidden;
} 

li { 
  float: left;
  background-color:#c4c4cc; 
  font-family:Tahoma, Geneva, sans-serif bold; 
  margin: 29px; 
  font-weight:bold; 
  padding:12px; 
}

ul {
  margin: 0px;
}

これは例のjs binです: http://jsbin.com/onakom/2/edit

于 2013-04-12T00:49:00.813 に答える
-2

<li>タグ内のテキストの最大サイズに適合する値でタグの高さを設定するだけです<li>。その後、動作します。

于 2014-12-15T08:15:21.613 に答える