跨度中的CSS固定宽度
跨度中的CSS固定宽度
提问于 2008-11-02 22:36:31
在无序列表中：
<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“的合理性并不重要。
懒惰动物文本可能被包装在一个额外的元素中，但我必须仔细检查。
回答 11
Stack Overflow用户
回答已采纳
发布于 2008-11-02 22:55:38
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/
Stack Overflow用户
发布于 2008-11-02 23:27:37
在理想情况下，只需使用以下css即可实现这一点
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>这适用于除FF2及更低版本以外的所有浏览器。
Firefox2及更低版本不支持此值。您可以使用-moz-inline-box，但请注意，它与inline-block不同，在某些情况下，它可能不会像您预期的那样工作。
引用自quirksmode
Stack Overflow用户
发布于 2008-11-02 22:56:44
不幸的是，内联元素(或具有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"> </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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/257505
复制相关文章
相似问题
腾讯云开发者
