Как сделать 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>

90
css css-float html 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

Это ширина, а высота. Добавьте атрибут height в класс 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 (без содержимого) свойство 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