Как сделать 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 90
html css css-float width

9 ответов:

div обычно требует по крайней мере неразрывного пространства ( ) для того, чтобы иметь ширину.

134

использовать padding,height или &nbsp чтобы ширина вступила в силу с пустым div

EDIT:

ненулевое min-height работает

80

использовать min-height: 1px; все имеет по крайней мере минимальную высоту 1px, поэтому никакое дополнительное пространство не занимает nbsp или обивка, или быть вынужденным знать высоту в первую очередь.

58

используйте CSS, чтобы добавить пространство нулевой ширины к вашему div. Содержимое div не займет места, но заставит div отображать

.test1::before{
   content: "0B";
}
24

Это ширина, а высота. Добавьте атрибут высоты в класс test1.

9

существуют различные методы, чтобы сделать пустой 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;}
  • или поставить &nbsp; внутри DIV (это иногда может принести неожиданные эффекты, например. в сочетании с text-decoration: underline;)
5

попробуйте добавить display:block; к вашему тесту1

1

слишком поздно отвечать, но тем не менее.

при использовании CSS, чтобы стиль div (content-less), свойство 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>
0

&#160; может сделать трюк; работает в xsl docs

-1