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"的理由并不重要.
懒惰的动物文本可能会包含在一个额外的元素中,但我必须仔细检查.
cod*_*ole 496
在一个理想的世界中,你只需使用以下css即可实现这一目标
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
这适用于除FF2及以下版本之外的所有浏览器.
Firefox 2及更低版本不支持此值.您可以使用-moz-inline-box,但请注意它与inline-block不同,并且在某些情况下可能无法正常工作.
报价取自quirksmode
- 与此同时,10年后,这绝对是一条路. (6认同)
Ste*_*ell 419
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/
- 应该是`diplay:inline-block; width:32px;`将在大多数现代浏览器中使用. (82认同)
- float属性生成一个具有宽度的"块框". (56认同)
- @PauloBueno can you change `diplay` to read `display`, BTW, it works for me. thanks (11认同)
- @Randy Marsh - 不,width属性只有效果,因为float属性会将元素更改为块显示,正如Stephen Caldwell所描述的那样. (2认同)
Tam*_*ege 18
不幸的是,内联元素(或具有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>
- 这是一个很好的解决方案.浮动div在水平排列时模仿跨度的预期行为.重要的是要记住清楚:两个换行符.这是在这种情况下避免表格的好方法. (3认同)
Aar*_*ell 13
该<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>
sch*_*ebe 13
使用 HTML 5.0，可以使用<span>或来固定文本块的宽度<div>。
对于<span>，重要的是添加以下 CCS 行
display: inline-block;
对于你的空虚来说，<span>重要的是增加 空间。
我的代码如下
display: inline-block;
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;
}PS：我定义了tab类，因为ul li spanCSS 选择器在我的电脑上不起作用！
| 归档时间： |
|
| 查看次数： |
711968 次 |
| 最近记录： |