0

<a>cssを使用してタグをラップするタグが必要な次のhtmlおよびcssコードがあり<li>ます。

ここにjsfiddleがあります

html

<section class="row header">
            <ul class="nav">
                <li class="navfirst"><a href="#">Contact</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Resume</a></li>
                <li><a href="#">Interests</a></li>
                <li><a href="#">Work</a></li>
                <li class="navlast"><a href="#">Comments</a></li>
            </ul>
        </section>

CSS

.header .nav {
 margin: 0;
 padding: 0; }
  .header .nav li {
list-style-type: none;
display: inline-block;
padding: 0.5% 1%;
border: 1px solid green; }
.header .nav li.navfirst {
  margin-right: 4%; }
.header .nav li.navlast {
  margin-left: 4%; }
.header .nav li a {
  display: block;
  text-decoration: none;
  border: 1px solid red;
  width: 100%;
  height: 100%; }

ここにscssがあります。上記のcssはscssファイルから変換されます

.nav {
    margin: 0;
    padding: 0;
    li {
        list-style-type: none;
        display: inline-block;
        padding: 0.5% 1%;
        border: 1px solid green;
        &.navfirst {
            margin-right: 4%;
        }
        &.navlast {
            margin-left: 4%;
        }
        a {
            display: block;
            text-decoration: none;
            border: 1px solid red;
            width: 100%;
            height: 100%;
        }
    }
}
4

1 に答える 1

1

liタグからパディングを削除します。

...
display: inline-block;
padding: 0.5% 1%;   <-- padding: 0
border: 1px solid green; 
...

http://jsfiddle.net/qrXWQ/1/

にパディングを追加しますa。

.header .nav li a {
     display: block;
     text-decoration: none;
     border: 1px solid red;
     padding: 5px; 
}

width: 100%上記のルールからandを削除してheight: 100%ください。そうしないと、パディングによってレイアウトが台無しになります...

http://jsfiddle.net/qrXWQ/2/

上記のルールでは、% を適用するベースの幅/高さが存在しないため、パーセント単位は機能しません。3 つのオプションがあります。1) LI にパディングを残す、2) a% 以外の単位でパディングを配置する (emここでは適切です)、または 3) メディア クエリを使用して、画面サイズごとに異なるパディングを設定します。

于 2012-09-05T13:34:31.963 に答える