在一个无序的列表中。
<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"的理由并不重要。
懒惰的动物文本可能被包裹在一个额外的元素中,但我必须仔细检查。
在一个理想的世界里,你可以简单地使用以下的css来实现这个目标。
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
除了FF2及以下的浏览器外,这个功能在所有的浏览器上都适用。
>.火狐2及以下版本不支持此功能。 火狐2及以下版本不支持此功能。
值,可以使用-moz-inline-box,也可以使用 你可以使用-moz-inline-box。
但要注意的是,它和&39;的不一样。
inline-block,它可能无法正常工作。
你在某些情况下所期望的。
引自[quirksmode][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说的,你需要在你的"empty"跨度中加入一个非断裂空间,但你不能给内联元素指定宽度,只能是padding/margin,所以你需要让它浮动,以便你能给它一个宽度。
关于一个jsfiddle的例子,请看
不幸的是,内联元素(或具有 display:inline 的元素)忽略了宽度属性。你应该使用浮动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>
<span>
标签需要设置为display:block
,因为它是一个内联元素,会忽略宽度。
所以,我们需要将标签设置为display:block
,因为它是内联元素,会忽略宽度。
<style type="text/css"> span { width: 50px; display: block; } </style>
然后,
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
在这种情况下,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元素的自由空间。
对于简单的情况应该比较好用。
你可以用一个表格来做,但它不是纯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>
请注意,它并不完全按照你的要求显示,因为它在每个选项上都会切换行。不过,我希望这能帮助你接近答案。
<!--开始片段。 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>
<!--结束片段-->