1

わかりました、ここでしばらく別の質問をしたいと思っていました。これが単純で、繰り返しではないことを願っています...

そのため、いくつかのアンカータグがネストされたリストアイテムリストがあります...

<ul class="news">
<li><a href="#">This Link is Longer</a></li>
<li><a href="#">My Links</a></li>
</ul>

それらのように。

ご覧のとおり、最初のアンカー タグのテキストは、下のアンカー タグよりも長く、より多くの文字が存在します。

リスト項目に背景色がありますが、各リスト項目の背景色/境界ボックスを、リスト項目であるため、その中のアンカー タグと同じ幅にする必要があります... (マージンとパディングを無視します) )

親divの内部にネストされたフロートの一部であるため、順序付けされていないリスト領域を最大幅40％に設定しています...

ul.news {
    max-width: 40%;
    float: right;
}

ul.news li {
    text-align: right;
    margin: 0px 0px 10px 0px;
    background-color: rgba(57,14,99,1.0);
    padding: 7px;
}

要するに

背景ボックスは、最大のアンカー タグの長さに設定されています。この例では、私のリンク「My Links」の周りに紫色のボックスがあり、その上にある「This Link is Longer」と同じ大きさまたは長さです。私はおそらく自分自身を蹴りますが、CSSを使用して、アンカーの子のサイズに対してliの幅（幅を想定しています）を設定するにはどうすればよいですか...「マイリンク」には「マイリンク」と同じ大きさの紫色のボックスが必要ですリンク」が拡張されます (もちろん、両側に 7 ピクセルのパディングが追加されます)。

ありがとうございます

4

2 に答える 2

1

リスト項目もフロートにする

ul.news li {
    float: right;
}

フィドルの例

于 2013-07-31T21:59:57.010 に答える
0

これは、あなたの望むことですか？

        ul.news {
            max-width: 40%;
            float: right;
        }

        ul.news li{
            text-align: right;
            margin: 0px 0px 10px 0px;
            padding: 7px 0px 7px 0px;
        }

        ul.news li a{
            padding: 7px;
            background-color: rgba(57,14,99,1.0);
        }
于 2013-07-31T22:07:56.987 に答える