blocks|key|858491|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858492|ul+{
++list-style-type:+none;
++padding-left:+0px;
}

ul+li+span+{
++float:+left;
++width:+40px;
}|code-block|syntax|javascript|858493|<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>|858494|858495|就像Eoin所说的，你需要在你的“空”跨度中放一个不间断的空格，但是你不能给一个内联元素分配一个宽度，只能填充/边距，所以你需要让它浮动，这样你才能给它一个宽度。|858496|有关jsfiddle示例，请参见http://jsfiddle.net/laurensrietveld/JZ2Lg/|offset|length|858497|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/laurensrietveld/JZ2Lg/^0|0|0|0|0|0|G|16|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;span&gt;&lt;/span&gt; The lazy dog.&lt;/li&gt;
  &lt;li&gt;&lt;span&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
  &lt;li&gt;&lt;span&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>Like Eoin said, you need to put a non-breaking space into your "empty" spans, but you can't assign a width to an inline element, only padding/margin so you'll need to make it float so that you can give it a width.</p>

<p>For a jsfiddle example, see <a href="http://jsfiddle.net/laurensrietveld/JZ2Lg/" rel="noreferrer">http://jsfiddle.net/laurensrietveld/JZ2Lg/</a></p>


blocks|key|5457695|text|不幸的是，内联元素(或具有display:+inline的元素)忽略了width属性。您应该改用浮动div：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5457696|<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>|code-block|syntax|javascript|5457697|现在我发现你需要使用跨度和列表，所以我们需要稍微重写一下：|5457698|<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>|5457699|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Unfortunately inline elements (or elements having display:inline) ignore the width property. You should use floating divs instead:</p>

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

&lt;div class="f1"&gt;&lt;/div&gt;&lt;div class="f2"&gt;The Lazy dog&lt;/div&gt;&lt;div class="f3"&gt;&lt;/div&gt;
&lt;div class="f1"&gt;AND&lt;/div&gt;&lt;div class="f2"&gt;The Lazy cat&lt;/div&gt;&lt;div class="f3"&gt;&lt;/div&gt;
&lt;div class="f1"&gt;OR&lt;/div&gt;&lt;div class="f2"&gt;The active goldfish&lt;/div&gt;&lt;div class="f3"&gt;&lt;/div&gt;
</code></pre>

<p>Now I see you need to use spans and lists, so we need to rewrite this a little bit:</p>

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

&lt;/head&gt;&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="f1"&gt;&amp;nbsp;&lt;/span&gt;The lazy dog.&lt;/li&gt;
&lt;li&gt;&lt;span class="f1"&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
&lt;li&gt;&lt;span class="f1"&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|858511|text|您可以使用表来完成此操作，但它不是纯CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858512|<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>|code-block|syntax|javascript|858513|请注意，它的显示并不完全像您想要的那样，因为它在每个选项上切换行。然而，我希望这能帮助你更接近答案。|858514|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can do it using a table, but it is not pure CSS.</p>

<pre><code>&lt;style&gt;
ul{
    text-indent: 40px;
}

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

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
&lt;/style&gt;


&lt;ul&gt;
&lt;span&gt;&lt;/span&gt;&lt;li&gt;The lazy dog.&lt;/li&gt;
&lt;span&gt;AND&lt;/span&gt;&lt;li&gt;The lazy cat.&lt;/li&gt;
&lt;span&gt;OR&lt;/span&gt;&lt;li&gt;The active goldfish.&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Note that it doesn't display exactly like you want, because it switches line on each option. However, I hope that this helps you come closer to the answer.</p>


blocks|key|3200014|text|<span>标记需要设置为display:block，因为它是一个内联元素，将忽略宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3200015|所以：|3200016|<style+type="text/css">+span+{+width:+50px;+display:+block;+}+</style>|code-block|syntax|javascript|3200017|然后：|3200018|<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something+else</li>|3200019|entityMap^0|0|6|D|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>The <code>&lt;span&gt;</code> tag will need to be set to <code>display:block</code> as it is an inline element and will ignore width.</p>

<p>so:</p>

<pre><code>&lt;style type="text/css"&gt; span { width: 50px; display: block; } &lt;/style&gt;
</code></pre>

<p>and then:</p>

<pre><code>&lt;li&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;something&lt;/li&gt;
&lt;li&gt;&lt;span&gt;AND&lt;/span&gt;something else&lt;/li&gt;
</code></pre>


blocks|key|5457761|text|在理想情况下，只需使用以下css即可实现这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5457762|<style+type="text/css">

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

</style>|code-block|syntax|javascript|5457763|这适用于除FF2及更低版本以外的所有浏览器。|5457764|5457765|+Firefox2及更低版本不支持此值。您可以使用-moz-inline-box，但请注意，它与inline-block不同，在某些情况下，它可能不会像您预期的那样工作。|blockquote|5457766|5457767|5457768|引用自quirksmode|offset|length|5457769|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/display.html^0|0|0|0|0|0|0|0|3|A|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$Q|18|R|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>In an ideal world you'd achieve this simply using the following css</p>

<pre><code>&lt;style type="text/css"&gt;

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

&lt;/style&gt;
</code></pre>

<p>This works on all browsers apart from FF2 and below.</p>

<blockquote>
  <p>Firefox 2 and lower don't support this
  value. You can use -moz-inline-box,
  but be aware that it's not the same as
  inline-block, and it may not work as
  you expect in some situations.</p>
</blockquote>

<p>Quote taken from <a href="http://www.quirksmode.org/css/display.html" rel="noreferrer">quirksmode</a></p>


blocks|key|5457798|text|好吧，总有一种暴力方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5457799|<li><pre>++++The+lazy+dog.</pre></li>
<li><pre>AND+The+lazy+cat.</pre></li>
<li><pre>OR++The+active+goldfish.</pre></li>|code-block|syntax|javascript|5457800|或者这就是你所说的“填充”文本？在这种情况下，这是一项模棱两可的工作。|5457801|这听起来有点像家庭作业的问题。我希望你不是想让我们帮你做作业？|5457802|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Well, there's always the brute force method:</p>

<pre><code>&lt;li&gt;&lt;pre&gt;    The lazy dog.&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;&lt;pre&gt;AND The lazy cat.&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;&lt;pre&gt;OR  The active goldfish.&lt;/pre&gt;&lt;/li&gt;
</code></pre>

<p>Or is that what you meant by "padding" the text? That's an ambiguous work in this context.</p>

<p>This sounds kind of like a homework question. I hope you're not trying to get us to do your homework for you?</p>


blocks|key|4046248|text|在这种情况下，人的跨度不能是块元素，因为li元素之间的其余文本将向下。另外，使用float也不是一个好主意，因为你需要设置整个li元素的宽度，这个宽度需要与整个ul元素或其他容器的宽度相同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4046249|在HTML中尝试如下所示：|4046250|<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>|code-block|syntax|javascript|4046251|在CSS中：|4046252|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|4046253|因此，当span元素是相对的时，您可以将li元素格式化为绝对空间，并将其设置为top:0;left:0;，以便它保持在左上角，并设置padding-left+(或：padding:0px+0px+0px+80px;)来为span元素设置此自由空间。|offset|length|style|CODE|4046254|对于简单的情况，它应该能更好地工作。|4046255|entityMap^0|0|0|0|0|0|K|2|13|D|1U|C|2A|P|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]|$O|14|P|15|Q|R]|$O|16|P|17|Q|R]|$O|18|P|19|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|V|$]]

<p>People span in this case cant be a block element because rest of the text in between li elements will go down. Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container.</p>
<p>Try something like this in HTML:</p>
<pre class="lang-html prettyprint-override"><code>&lt;li&gt;&lt;span&gt;&lt;/span&gt;&lt;strong&gt;The&lt;/strong&gt; lazy dog.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;AND&lt;/span&gt; &lt;strong&gt;The&lt;/strong&gt; lazy cat.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;OR&lt;/span&gt;  &lt;strong&gt;The&lt;/strong&gt; active goldfish.&lt;/li&gt;
</code></pre>
<p>and in the CSS:</p>
<pre class="lang-css prettyprint-override"><code>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
</code></pre>
<p>So, when the <code>li</code> element is relative you format the span element to be as absolute and at the <code>top:0;left:0;</code> so it stays upper left and you set the <code>padding-left</code> (or: <code>padding:0px 0px 0px 80px;</code>) to set this free space for span element.</p>
<p>It should work better for simple cases.</p>


blocks|key|4046292|text|<style+type="text/css">

span+{
++position:absolute;
++width:+50px;
}

</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4046293|您可以使用此方法为行内元素分配宽度|unstyled|4046294|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;style type="text/css"&gt;

span {
  position:absolute;
  width: 50px;
}

&lt;/style&gt;
</code></pre>

<p>You can do this method for assigning width for inline elements</p>


blocks|key|858671|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858672|>+<span+class="input-group-addon"+style="padding-left:6%25;
>+padding-right:6%25;+width:150px;+overflow:+auto;">|code-block|syntax|javascript|858673|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this </p>

<pre><code>&gt; &lt;span class="input-group-addon" style="padding-left:6%;
&gt; padding-right:6%; width:150px; overflow: auto;"&gt;
</code></pre>


blocks|key|4046413|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4046414|ul+{
	list-style-type:+none;
	padding-left:+0px;
}

ul+li+span+{+
	float:+left;
	width:+40px;
}|code-block|syntax|javascript|4046415|<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>|4046416|4046417|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
	list-style-type: none;
	padding-left: 0px;
}

ul li span { 
	float: left;
	width: 40px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;span&gt;&lt;/span&gt; The lazy dog.&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4046494|text|在HTML5.0中，可以使用<span>或<div>来固定文本块的宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4046495|​|4046496|📷|atomic|4046497|4046498|对于<span>，重要的是添加以下CCS行|4046499|display:+inline-block;|code-block|syntax|javascript|4046500|对于空的<span>，重要的是添加&nbsp;空间。|4046501|我的代码如下|4046502|4046503|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;
	}|4046504|&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>|4046505|4046506|PS:我已经定义了tab类，因为ul+li+span+CSS选择器在我的PC上不工作！|4046507|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d71aad440edf912c1b8be2f1a70cbea9.png|imageAlt^0|E|6|L|5|0|0|0|1|0|0|0|2|6|0|0|4|6|H|6|0|0|0|0|0|0|9|3|G|A|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|K|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|N|3|O|5|P|7|1R|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1X|8|@]|D|@]|E|$]]|$1|W|3|G|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|X|3|Y|5|P|7|1Z|8|@]|D|@]|E|$Q|R]]|$1|Z|3|10|5|P|7|20|8|@]|D|@]|E|$Q|R]]|$1|11|3|G|5|6|7|21|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|22|8|@$9|23|A|24|B|C]|$9|25|A|26|B|C]]|D|@]|E|$]]|$1|14|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B|1C|-4]]]]

<p>Using HTML 5.0, it is possible to fix width of text block using <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code>. </p>

<p><a href="https://i.stack.imgur.com/TiDMd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TiDMd.png" alt="enter image description here"></a></p>

<p>For <code>&lt;span&gt;</code>, what is important is to add following CCS line</p>

<pre><code>display: inline-block;
</code></pre>

<p>For your empty <code>&lt;span&gt;</code> what is important is to add <code>&amp;nbsp;</code> space.</p>

<p>My code is following</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
	}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&amp;lt;DIV&amp;gt;

&lt;div class='test'&gt;ABCDEF&lt;/div&gt;

&amp;lt;SPAN&amp;gt;

&lt;div&gt;
    &lt;span class='test'&gt;ABCDEF&lt;/span&gt;
&lt;/div

&lt;br&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;span class='tab'&gt;&amp;nbsp;&lt;/span&gt; The lazy dog.&lt;/li&gt;
  &lt;li&gt;&lt;span class='tab'&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
  &lt;li&gt;&lt;span class='tab'&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>PS: I have defined <code>tab</code> class because <code>ul li span</code> CSS selector is not working on my PC !</p>


<p>Within an unordered list:</p>

<pre><code>&lt;li&gt;&lt;span&gt;&lt;/span&gt; The lazy dog.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
</code></pre>

<p>Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.</p>

<p>The page is rendering with Courier New.</p>

<p>Goal is to have text after span lined up.</p>

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

<p>Justification of the "OR" is unimportant.</p>

<p>The lazy animal text may be wrapped in an additional element but I'll have to double check.</p>


CSS fixed width in a span

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在无序列表中：<li><span></span> The lazy dog.</li><li><span>AND</span> The lazy cat.</li><li><span>OR</span> The active goldfish.</li>允许添加类或样式属性，但不允许填充文本和添加或更改标记。该页面正在...

问跨度中的CSS固定宽度
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问跨度中的CSS固定宽度EN