How to make a div with no content have a width?
I am trying to add a width to a div, but I seem to be running into a problem because it has no content.
Here is the CSS and HTML I have so far, but it is not working:
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
cl开发者_如何学Pythonear:both;
}
.test1{
width:200px;
float:left;
}
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>
a div usually needs at least a non-breaking space ( ) in order to have a width.
Either use padding , height or   for width to take effect with empty div
EDIT:
Non zero min-height also works great
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.
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
.test1::before{
content: "\200B";
}
It has width but no content or height. Add a height attribute to the class test1.
There are different methods to make the empty DIV with float: left or float: right visible.
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;)
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)
Code:
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}<div class="shape-round"></div>Try to add display:block; to your test1
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.
width: 13px;
min-width: 13px;
did the trick for me
  may do the trick; works in XSL docs
If you set display: to inline-block, block, flex, ..., on the element with no content, then
For min-width to take effect on a tag with no content, you only need to apply padding for either top or bot.
For min-height to take effect on a tag with no content, you only need to apply padding for left or right.
This example showcases it; here I only sat the padding-left for the min-width to take effect on an empty span tag
You can use position:absolute to assign width and height directly, without any content.
that can easily do it if you are considering a single div.
By defining min width/hright for your element you can render it without content:
<div class="your-element"><div>
.your-element {
min-width: 100px;
min-height: 20px;
// This is only for observing the element space
background: blue;
}
Same problem, my initial css is width: 5px, updating it to min-width: 5px made the contentless div appear!
No need for extra height/min-height/padding/display properties
Perhaps the most elegant:
display: inline-block;
(credit: @Luccas suggestion in a comment under the top answer)
加载中,请稍侯......
精彩评论