在无序列表中:
<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 及以下版本之外的所有浏览器。
Firefox 2 及更低版本不支持此值。您可以使用 -moz-inline-box,但请注意,它与 inline-block 不同,并且在某些情况下它可能无法按预期工作。
引自 quirksmode
ul { 列表样式类型:无;填充左:0px; } ul li span { 浮动:左;宽度:40px; }
就像 Eoin 说的那样,你需要在你的“空”跨度中放置一个不间断的空间,但你不能为内联元素分配宽度,只能分配填充/边距,所以你需要让它浮动,这样你就可以给它一个宽度。
有关 jsfiddle 示例,请参阅 http://jsfiddle.net/laurensrietveld/JZ2Lg/
diplay: inline-block; width: 32px;
。
diplay
改成 display
,顺便说一句,它对我有用。谢谢
不幸的是,内联元素(或具有 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>
<span>
标记需要设置为 display:block
,因为它是一个内联元素并且会忽略宽度。
所以:
<style type="text/css"> span { width: 50px; display: block; } </style>
接着:
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
使用 HTML 5.0,可以使用 <span>
或 <div>
固定文本块的宽度。
https://i.stack.imgur.com/TiDMd.png
对于 <span>
,重要的是添加以下 CCS 行
display: inline-block;
对于您的空 <span>
,重要的是添加
空间。
我的代码如下
正文 { 字体系列:宋体;字体大小:20px; } div { 宽度:200px;字体大小:80px;背景颜色:石灰; } div 跨度 { 显示:块;宽度:200px;背景颜色:石灰; } ul li span { 显示:内联块;宽度:80px;背景颜色:黄色; } span.tab { 显示:内联块;宽度:80px;背景颜色:黄色; } <DIV>
PS:我已经定义了 tab
类,因为 ul li span
CSS 选择器在我的 PC 上不起作用!
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
您可以使用此方法为内联元素分配宽度
在这种情况下,人跨度不能是块元素,因为 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 class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
您可以使用表格来完成,但它不是纯 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>
请注意,它不会完全按照您想要的方式显示,因为它会在每个选项上切换线路。但是,我希望这可以帮助您更接近答案。
好吧,总是有蛮力方法:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
或者这就是您所说的“填充”文本的意思?在这种情况下,这是一项模棱两可的工作。
这听起来有点像家庭作业问题。我希望你不是想让我们为你做作业?
ul { 列表样式类型:无;填充左:0px; } ul li span { 浮动:左;宽度:40px; }
不定期副业成功案例分享