2

水平ナビゲーションの作成に問題があります。私の問題は、ULとULのリストアイテムのマージンとパディングをいじりたいときです。

これらは私が抱えている問題です：

  1. -topと-bottomのプロパティを変更しようとすると、ULのmargin-topを取得してリストアイテムを下に移動することはほとんどできないようです。

  2. マージンとパディングの-rightプロパティと-leftプロパティを使用すると、ナビゲーションからがらくたが出てきます。これを克服するために幅を変更しようとしましたが、役に立ちませんでした。

以下に提供されるHTMLおよびCSSコード：

<div id="HorizNav">
  <ul>
    <li><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
  <ul>
</div>

#HorizNav ul {
  float: right;
  text-Align: left;
  width: 660px;

  background: #ff0000;
  color: #fff;
  font-size: 1.5em;

  padding-top: 0px; padding-bottom: 0px;
  padding-left: 5px; padding-right: 5px;
}

#HorizNav ul li { display: inline; }

#HorizNav ul li a {
  text-decoration: none;
  background-color: #0000ff;
  color: #fff;
}

助けてください。前もって感謝します。

4

1 に答える 1

2

ul終了タグがありません。2番目<ul>は</ul>

私はあなたが探していると思いますbox-sizing: border-box;。

#HorizNav ul {
    ...
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
   ...
}

デモ

于 2013-01-23T01:17:33.160 に答える