跨度中的CSS固定宽度

Question

在无序列表中：

<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”的理由并不重要。

懒惰的动物文字可能包含在其他元素中，但我必须仔细检查。

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

就像Eoin所说的那样，您需要在“空”跨度中放置一个不间断的空格，但是您不能为内联元素分配宽度，只能填充/边距，因此您需要使其浮动，以便给它一个宽度。