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

htmlcss

提问by hucmarcot

see my screenshot, even I set width, the span width still be "auto"

看我的截图,即使我设置了宽度,跨度宽度仍然是“自动”

enter image description here

在此处输入图片说明

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>