除非输入文本，否则不显示跨度的宽度和高度

Question

我有一个<span id="some"></span>，而css是

#some{
      background-color:#000; width:150px; height:50px; 
}

除非输入内容，否则不显示宽度和高度。我该如何解决这个问题？

Answer 1

span是一个内联元素，因此，如果不告诉浏览器其display属性为block，您所执行的操作将无法解决。

简而言之：

#some{
  background-color:#000; 
  width:150px; 
  height:50px; 
  display: block;
}

希望它有所帮助，思南

Answer 2

你不能给内联元素赋予高度/宽度，它的大小由它的内容决定，但是你可以像这样给它display: inline-block;：

#some{
  background-color:#000; width:150px; height:50px; display: inline-block;
}​

See an example here，请注意IE7在某些情况下不会处理此问题，因此display: block;会在那里工作（但老实说，为什么不使用<div>呢？）。 ..但请记住inline-block在流程中，而block将所有内容都排成一行。

Answer 3

常见的解决方案是使用＆amp; nbsp;在span标签中。 （我假设你想要成为display:block;？）

Answer 4

正如其他人提到的span是内联元素，你要么需要使用block元素（使用display：block），要么在它的位置使用块元素（div）。为了更好地理解内联和块元素，以及整个html / css渲染模型，我建议你阅读http://www.w3.org/TR/CSS2/visuren.html。

Answer 5

使用display：block;它会完美地运作。

由于 雷克斯