スパンのCSS固定幅

381

順不同リスト内：

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

クラスまたはスタイル属性の追加は許可されていますが、テキストのパディングおよびタグの追加または変更は許可されていません。

ページはCourier Newでレンダリングしています。

目標は、スパンを揃えた後にテキストを配置することです。

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

「OR」の正当化は重要ではありません。

怠惰な動物のテキストは追加の要素でラップされる場合がありますが、再確認する必要があります。

html  css 
— ジェイソン・サルド
ソース

回答:

427 

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が言ったように、「空の」スパンに改行しないスペースを入れる必要がありますが、インライン要素に幅を割り当てることはできません。パディング/マージンのみなので、フローティングできるようにする必要があります。それに幅を与えます。

jsfiddleの例については、http： //jsfiddle.net/laurensrietveld/JZ2Lg/を参照してください

— スティーブン・コールドウェル
ソース
1
<span>はデフォルトではインライン要素です-フローティングしても幅はありません。
— codeinthehole 2008年
56
floatプロパティは、幅のある「ブロックボックス」を生成します。
— スティーブンコールドウェル
83
それdiplay: inline-block; width: 32px;はほとんどの最新のブラウザで行う必要があります。
— Paulo Bueno 2012年
2
@Randy Marsh-いいえ、floatプロパティは要素をブロック表示に変更するため、widthプロパティは効果のみを持ちます。これは、Stephen Caldwellが前述したとおりです。
— codeinthehole
14
@PauloBuenoは、あなたが変更することができますdiplay読み取るためにdisplay、ところで、それは私のために動作します。感謝
— バサラト2013
507

理想的な世界では、次のcssを使用するだけでこれを実現できます

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

これは、FF2以下を除くすべてのブラウザーで機能します。

Firefox 2以前はこの値をサポートしていません。-moz-inline-boxを使用できますが、これはinline-blockとは異なり、状況によっては期待どおりに機能しない可能性があることに注意してください。

quirksmodeから引用

— codeinthehole
ソース
1
@NicholasPickering .. wkhtmltopdfはどうですか？
— codeinthehole 2013年
うーん、わかりません。それはほんのマイナーな後退です。目的の効果を得るには、テーブルを使用する必要がありました。
— ニコラスピカリング2013年
まあ、CSS3準拠のものが必要な場合は、wkhtmltopdfをお勧めします。
— codeinthehole 2013年
7
一方、10年後、これは間違いなく進むべき道です。
— ヴォグ2018
19

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

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<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>

スパンとリストを使用する必要があるので、これを少し書き直す必要があります。

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</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>
</body>
</html>
— タマス・チネゲ
ソース
3
それは素晴らしい解決策です。フローティングdivは、スパンが水平に並んでいるときに、スパンの意図された動作を模倣します。clear：両方の改行を覚えておくことが重要です。これは、このコンテキストでテーブルを回避するための優れた方法です。
— artur
わかりません。ボタンはインライン要素またはインラインブロック要素です。なぜ「幅」が適用されるのですか？ボタンはインライン要素のようですよね？すべてのHTML要素のデフォルトの「表示」プロパティを示すドキュメントはありますか？
— GMsoF 2014
14

<span>タグに設定する必要がありますdisplay:block、それはインライン要素であり、幅を無視するように。

そう：

<style type="text/css"> span { width: 50px; display: block; } </style>

その後：

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>
— アーロン・パウエル
ソース
いいえ、これはうまくいきません。「何か」は次の行に進みます。そして、「<」が欠落しています
— user1537366
言ったように、それは機能しません！jsfiddle.net/m156a0qpを確認してください。また、すべてのスパン要素のCSSをいじることは決して良いことではありません！
— user1537366 2015
2

この場合、人々は、li要素間のテキストの残りの部分が下に移動するため、ブロック要素にすることはできません。また、フロートを使用することは非常に悪い考えです。これは、li要素全体の幅を設定する必要があり、この幅がul要素全体または他のコンテナーの幅と同じである必要があるためです。

このようなものをhtmlで試してください：

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

そしてCSSで

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

そのため、li要素が相対である場合は、span要素を絶対的で上部0;左：0;にフォーマットします。そのため、左上にとどまり、padding-left（またはpadding：0px 0px 0px 80px;）を設定して、スパン要素のこの空きスペースを設定します。

単純なケースではよりうまく機能するはずです。

— アルトゥーロ
ソース
1

HTML 5.0では、<span>またはを使用してテキストブロックの幅を修正できます<div>。

ここに画像の説明を入力してください

の場合<span>、重要なのは次のCCS行を追加することです

display: inline-block;

あなたの空のために<span>重要なことは&nbsp;スペースを追加することです。

私のコードはフォローしています

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>
スニペットを展開

PS：CSSセレクターが私のPCで機能していないtabため、クラスを定義しましたul li span！

— Schlebe
ソース
＆nbsp;の挿入 私のために働いたものでした！
— adrien le coarer
0

テーブルを使用してそれを行うことができますが、それは純粋なCSSではありません。

<style>
ul{
    text-indent: 40px;
}

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

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<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>

各オプションの行を切り替えるため、希望どおりに表示されないことに注意してください。しかし、これがあなたが答えに近づくのに役立つことを願っています。

— ルイスキュバル
ソース
-1

ええと、常に力ずくの方法があります：

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

それとも、テキストに「パディング」するという意味ですか？これは、この文脈ではあいまいな作業です。

これは、宿題の質問のように聞こえます。私たちに宿題をやらせようとしていないのですか？

— イールソン
ソース
-1 

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>
スニペットを展開

— ペペウノドストレス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.