Question

在无序列表中：

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

懒惰的动物文本可以包含在一个额外的元素中，但我必须仔细检查。

Answer 1

在一个理想的世界中，你只需使用以下css即可实现这一目标

<style type="text/css">

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

</style>

这适用于除FF2及以下版本之外的所有浏览器。

Firefox 2及更低版本不支持此功能值。你可以使用-moz-inline-box，但请注意，它不一样内联块，它可能无法正常工作你希望在某些情况下。

引自quirksmode

Answer 2

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/

Answer 3

不幸的是，内联元素（或具有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>

Answer 4

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

Answer 5

<style type="text/css">

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

</style>

您可以使用此方法为内联元素指定宽度

Answer 6

在这种情况下，人们不能成为一个块元素，因为li元素之间的其他文本将会关闭。使用float也是一个非常糟糕的想法，因为你需要为整个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; left：0;所以它保持左上角你设置padding-left（或：padding：0px 0px 0px 80px;）来为span元素设置这个空闲空间。

对于简单的案例，它应该更好。

Answer 7

使用HTML 5.0，可以使用<span>或<div>固定文本块的宽度。

对于<span>，重要的是添加以下CCS行

display: inline-block;

对于空的<span>，重要的是增加 空间。

我的代码正在关注

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：我定义了tab类是因为ul li span CSS选择器无法在我的PC上工作！

Answer 8

你可以使用表格来完成它，但它不是纯粹的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>

请注意，它不会完全按照您的需要显示，因为它会在每个选项上切换一行。但是，我希望这可以帮助您更接近答案。

Answer 9

嗯，总有蛮力方法：

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

或者说“填充”文本是什么意思？在这种情况下，这是一项模棱两可的工作。

这听起来有点像家庭作业问题。我希望你不是想让我们为你做功课吗？

Answer 10

试试这个

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

Answer 11

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>

CSS固定宽度在一个范围内

11 个答案: