跨度中的 CSS 固定宽度答案

【问题标题】：CSS fixed width in a span跨度中的 CSS 固定宽度
【发布时间】：2023-03-09 21:44:01
【问题描述】：

在无序列表中：

<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 呈现。

目标是让 span 之后的文本排成一行。

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

“OR”的合理性并不重要。

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

【问题讨论】：

标签： html css

【解决方案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 所说，您需要在“空”跨度中放置一个不间断的空间，但您不能为内联元素分配宽度，只能为填充/边距分配宽度，因此您需要使其浮动你可以给它一个宽度。

有关 jsfiddle 示例，请参阅 http://jsfiddle.net/laurensrietveld/JZ2Lg/

【讨论】：

默认情况下是一个内联元素 - 浮动它不会给它一个宽度。
float 属性生成一个有宽度的“块框”。
应该是diplay: inline-block; width: 32px; 在大多数现代浏览器中都可以。
@Randy Marsh - 不，width 属性仅起作用，因为 float 属性将元素更改为块显示，正如 Stephen Caldwell 上面所描述的那样。
@PauloBueno 你能把diplay 改成display，顺便说一句，它对我有用。谢谢

【解决方案2】：

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

【讨论】：

这是一个很好的解决方案。浮动 div 在水平排列时模仿 span 的预期行为。重要的是要记住 clear:both 换行符。这是在这种情况下避免使用表格的好方法。
我不明白，按钮是内联或内联块元素，为什么“宽度”会适用于它？按钮看起来像一个内联元素，对吧？是否有任何文档显示所有 html 元素的默认“显示”属性？

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

不，我认为这行不通。 “某事”转到下一行。并且缺少一个“
正如我所说，它不起作用！检查jsfiddle.net/m156a0qp。还有，插手所有 span 元素的 CSS 也不好！

【解决方案5】：

在理想情况下，您只需使用以下 css 即可实现这一目标

<style type="text/css">

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

</style>

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

Firefox 2 及更低版本不支持此功能价值。您可以使用-moz-inline-box，但请注意，它与内联块，它可能无法作为在某些情况下你会期望。

引用自quirksmode

【讨论】：

@NicholasPickering .. wkhtmltopdf 怎么样？
嗯，不确定。这只是一个小小的挫折。最终不得不使用表格来获得所需的效果。
好吧，如果你需要符合 CSS3 的东西，我可以推荐 wkhtmltopdf。
同时，10 年后，这绝对是要走的路。

【解决方案6】：

嗯，总是有蛮力方法：

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

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

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

【讨论】：

【解决方案7】：

在这种情况下，People span 不能是块元素，因为 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 元素格式化为绝对元素并位于top:0;left:0;，因此它保持在左上角，您可以设置padding-left（或：padding:0px 0px 0px 80px;）来设置它span 元素的可用空间。

它应该更适合简单的情况。

【讨论】：

【解决方案8】：

<style type="text/css">

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

</style>

您可以使用此方法为内联元素分配宽度

【讨论】：

【解决方案9】：

试试这个

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

【讨论】：

【解决方案10】：

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>

【讨论】：

【解决方案11】：

使用 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：我已经定义了tab 类，因为ul li span CSS 选择器在我的电脑上不起作用！

【讨论】：