Html 如何使没有内容的div具有宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4171286/
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
How to make a div with no content have a width?
提问by runeveryday
I am trying to add a width to a div, but I seem to be running into a problem because it has no content.
我正在尝试向 a 添加宽度div，但我似乎遇到了问题，因为它没有内容。
Here is the CSS and HTML I have so far, but it is not working:
这是我到目前为止的 CSS 和 HTML，但它不起作用：
CSS
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
HTML
HTML
<body>
<div id="test">
<ul>
<li>
<div class="test1">width1</div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
</ul>
</div>
回答by jcomeau_ictx
a div usually needs at least a non-breaking space ( ) in order to have a width.
div 通常至少需要一个不间断的空格 ( ) 才能具有宽度。
回答by ArK
Either use padding, heightor  for width to take effect with empty div
要么使用padding,height要么 让宽度在空时生效div
EDIT:
编辑：
Non zero min-heightalso works great
非零min-height也很好用
回答by riley
Use min-height: 1px;Everything has at least min-height of 1px so no extra space is taken up with nbsp or padding, or being forced to know the height first.
使用min-height: 1px;Everything 的最小高度至少为 1px，因此 nbsp 或 padding 不会占用额外的空间，也不会被迫先知道高度。
回答by BernardV
Use CSS to add a zero-width-space to your div. The content of the div will take no room but will force the div to display
使用 CSS 向 div 添加零宽度空间。div 的内容不会占用空间，但会强制 div 显示
.test1::before{
content: "0B";
}
回答by Michael
It has width but no content or height. Add a height attribute to the class test1.
它有宽度但没有内容或高度。向类 test1 添加高度属性。
回答by simhumileco
There are different methods to make the empty DIV with float: leftor float: rightvisible.
有不同的方法可以使空 DIV 带有float: left或float: right可见。
Here presents the ones I know:
这里介绍我所知道的：
- set
width(ormin-width) withheight(ormin-height) - or set
padding-top - or set
padding-bottom - or set
border-top - or set
border-bottom - or use pseudo-elements:
::beforeor::afterwith:{content: "\200B";}- or
{content: "."; visibility: hidden;}
- or put
inside DIV (this sometimes can bring unexpected effects eg. in combination withtext-decoration: underline;)
- 集
width（或min-width）与height（或min-height） - 或设置
padding-top - 或设置
padding-bottom - 或设置
border-top - 或设置
border-bottom - 或使用伪元素：
::before或::after与：{content: "\200B";}- 或者
{content: "."; visibility: hidden;}
- 或放入
DIV（这有时会带来意想不到的效果，例如与 结合text-decoration: underline;）
回答by Bhaskar Pramanik
Too late to answer, but nevertheless.
来不及回答，但仍然如此。
While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)
在使用 CSS 时，要设置 div 的样式（无内容），必须将 min-height 属性设置为“n”px 以使 div 可见（适用于 webkit 和 chrome，但不确定此技巧是否适用于 IE6 和降低）
Code:
代码：
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}<div class="shape-round"></div>回答by DevenX
Try to add display:block;to your test1
尝试添加display:block;到您的 test1
回答by deathfry
I had the same issue. I wanted icons to appear by pressing the button but without any movement and sliding the enviroment, just like bulb: on and off, appeared and dissapeared, so I needed to make an empty div with fixed sizes.
我遇到过同样的问题。我希望通过按下按钮来显示图标但没有任何移动和滑动环境，就像灯泡一样：打开和关闭，出现和消失，所以我需要制作一个固定大小的空 div。
width: 13px;
min-width: 13px;
did the trick for me
对我有用
回答by Daniel Forrest
 may do the trick; works in XSL docs
 可以解决问题；适用于 XSL 文档
