0

ほとんどのCMSとシームレスに統合できるフッターを作成しようとしているので、リスト項目とその中のネストされたリスト、メニュースタイルを使用します。私が受け取ったデザインには、連続した灰色の背景を持つトップレベルのリストがありますが、ネストされたリストアイテムは、背景なしでそれらの下にあります。

floatとclearの設定を何度もいじった後、私はこれを思いついた（ライブデモはこちら：http：//jsfiddle.net/mQqWX/）。

これは私が必要としているものに非常に近いです。問題は、上部（暗い）の灰色の背景を連続させるには、リンクの幅を100％にする必要があったことです。liこれにより、アンカーの幅がそれらをホストするアイテムの外側になります。アイテムを処理すると、アンカーの幅に拡張するのではなく、スクロールバーが表示overflow: autoされます。li

これにより、右端の問題が発生します。リストの最後の項目（イベント）で、丸みを帯びた背景が含まれている境界を超えてdiv、ul[About Us]リンク（背景がないはずです）に入ります。もう一度試してみるとoverflow: auto、スクロールバーが表示されます。また、両方の要素にclearfix（：after付き）があります。

リンクの幅を、リンクの幅だけに<li>して、右側にオーバーフローが発生しないようにするにはどうすればよいwidth: 100%ですか？

<div>これらの厄介なスクロールバーを取得せずに、ラッパーを作成し<ul>て水平方向の幅を含むように拡張するにはどうすればよいですか？

ありがとう！

PSこれは私の前の質問の続きであり、多くの試行錯誤の末にいくらかの進歩がありました。

4

2 に答える 2

2

Give box-sizing: border-box to the a's. That solves it. It doesn't work in older IE's though. To make it work you could add a span inside the a tag. The a tag would have the 100% width set on it, the span, with display: block, would have the padding.

The problem comes from the fact that the padding gets added to the width. width: 100%; + padding: 20px; makes width actually equal to 100% + 20px + 20px. It's more than what you want.

box-sizing: border-box; tells the browser to keep the width always at 100% - padding + border + width = 100% - this is what I use these days - I add it to all elements via the universal * selector.

于 2012-11-11T14:09:00.070 に答える
2

Remember : Padding + Width = true displayed width

so if you set width:100% and padding-left:10px Lets say the parent has a with of 500px the true displayed width will be 510px, which enables the scroll bar, its miss-leading but its css

于 2012-11-11T14:11:04.637 に答える