スパンでのCSS固定幅

順不同のリストの中で

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

classやstyle属性の追加は許されますが、テキストのパディングやタグの追加・変更は許されません。

このページはCourier Newでレンダリングされています。

目標は、スパンの後のテキストを整列させることです。

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

OR"の正当性は重要ではありません。

怠惰な動物のテキストは、追加の要素でラップされているかもしれませんが、再確認しなければなりません。

Shaeldon
編集された質問 19日 3月 2015 в 11:27
プログラミング
html css
2日 11月 2008 в 10:36
18 ビュー
ソリューション
ul {
    list-style-type: none;
    padding-left: 0px;
}

ul li span { 
    float: left;
    width: 40px;
}
<ul>
    <li><span></span> The lazy dog.</li>
    <li><span>AND</span> The lazy cat.</li>
    <li><span>OR</span> The active goldfish.</li>
</ul>

Eoinが言ったように、"empty"のスパンにはノンブレーキングのスペースを入れる必要がありますが、インライン要素にはpadding/marginのみで幅を割り当てることができないので、幅を与えられるようにfloatにする必要があります。

jsfiddleの例としては、http://jsfiddle.net/laurensrietveld/JZ2Lg/。

PythonDev
編集した答え 4日 1月 2017 в 7:36
解説 (9)

残念ながらインライン要素（またはdisplay:inlineを持つ要素）はwidthプロパティを無視します。代わりにフローティングdivを使用する必要があります。


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

さて、スパンやリストを使う必要があることがわかりましたので、これを少し書き換える必要があります。



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
Tamas Czinege
編集した答え 2日 11月 2008 в 11:09
解説 (2)

テーブルを使えばできますが、純粋なCSSではありません。


ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

選択肢ごとに行が切り替わるため、希望通りの表示にはならないことに注意してください。しかし、これがあなたの答えに近づく助けになることを願っています。

解説 (0)