Html 如何为跨度设置固定宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35519155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:58:03 来源:igfitidea点击:
How to set fixed width for span
提问by hucmarcot
see my screenshot, even I set width, the span width still be "auto"
看我的截图,即使我设置了宽度,跨度宽度仍然是“自动”
here is my
这是我的
<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>
回答by j08691
Set the display property of the spans to inline-block like:
将跨度的显示属性设置为 inline-block ,如:
.container span {
display: inline-block;
}
<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>
An inline element occupies only the space bounded by the tags that define the inline element (MDN).
内联元素仅占用由定义内联元素 ( MDN)的标签限定的空间。
回答by Ashish Patel
Just use
<div class="container">
<div class="row" style="width:auto;background-color: red;"><span>prefix1</span><span>prpr</span></div>
<div class="row" style="width:auto;background-color: red;"><span>pre2</span><span>prpr</span></div>
</div>