span中的CSS固定宽度

在一个无序的列表中。

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

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

Shaeldon
已编辑的问题 19日 三月 2015 в 11:27
编程
html css
2日 十一月 2008 в 10:36
40 种观点

在一个理想的世界里，你可以简单地使用以下的css来实现这个目标。



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

除了FF2及以下的浏览器外，这个功能在所有的浏览器上都适用。

&gt.火狐2及以下版本不支持此功能。 火狐2及以下版本不支持此功能。

值，可以使用-moz-inline-box，也可以使用 你可以使用-moz-inline-box。

但要注意的是，它和&39;的不一样。

inline-block，它可能无法正常工作。

你在某些情况下所期望的。

引自[quirksmode][1]。

[1]: http://www.quirksmode.org/css/display.html

评论(6)
解决办法
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>
PythonDev
编辑本段答案4日 一月 2017 в 7:36
评论(9)

不幸的是，内联元素（或具有 display:inline 的元素）忽略了宽度属性。你应该使用浮动div来代替。


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


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

现在我看到你需要使用跨度和列表，所以我们需要重写一下。



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<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>
Tamas Czinege
编辑本段答案2日 十一月 2008 в 11:09
评论(2)

<span>标签需要设置为display:block，因为它是一个内联元素，会忽略宽度。

所以，我们需要将标签设置为display:block，因为它是内联元素，会忽略宽度。

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

然后，

<li><span> </span>something</li>
<li><span>AND</span>something else</li>
Aaron Powell
编辑本段答案9日 二月 2015 в 2:52
评论(2)
 


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

你可以用这种方法为内联元素分配宽度。

评论(0)

在这种情况下，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元素的自由空间。

对于简单的情况应该比较好用。

评论(0)

好吧，总是有'的蛮力方法。

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

还是你说的"padding&quot。 的文字？ 这'在这种情况下是个模棱两可的工作。

这听起来有点像一道作业题。 我希望你'不是想让我们帮你做作业？

评论(0)

你可以用一个表格来做，但它不是纯CSS。


ul{
    text-indent: 40px;
}

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

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


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

请注意，它并不完全按照你的要求显示，因为它在每个选项上都会切换行。不过，我希望这能帮助你接近答案。

评论(0)

试试这个

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

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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>

<！--结束片段-->

评论(0)