Как сделать DIV без контента иметь ширину?
Я пытаюсь добавить ширину в DIV, но я, похоже, сталкиваюсь с проблемой, потому что у нее нет контента. Вот CSS и HTML, которые у меня есть до сих пор, но он не работает:
в CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear: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>
9 ответов
использовать padding
, height
или  
для ширины, чтобы вступить в силу с пустым div
EDIT:
ненулевое min-height
работает
использовать min-height: 1px;
все имеет по крайней мере минимальную высоту 1px, поэтому дополнительное пространство не занято nbsp или прокладкой или вынуждено сначала знать высоту.
используйте CSS, чтобы добавить пробел нулевой ширины в div. Содержимое div не займет места, но заставит div отображать
.test1::before{
content: "0B";
}
существуют различные методы, чтобы сделать пустой DIV с float: left
или float: right
видны.
здесь представлены те, кого я знаю:
- set
width
(илиmin-width
) Сheight
(илиmin-height
) - или set
padding-top
- или set
padding-bottom
- или set
border-top
- или set
border-bottom
- или использовать псевдо-элементами:
::before
или::after
С:-
{content: "0B";}
- или
{content: "."; visibility: hidden;}
-
- или поставить
внутри DIV (это иногда может привести к неожиданным эффектам, например. в сочетании сtext-decoration: underline;
)
слишком поздно отвечать, но тем не менее.
при использовании CSS для стиля div (без содержимого) свойство min-height должно быть установлено в "n"px, чтобы сделать div видимым (работает с webkits и chrome, хотя не уверен, что этот трюк будет работать на IE6 и ниже)
код:
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}
<div class="shape-round"></div>