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

Ответы

Ответ 1

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

Ответ 2

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

EDIT:

Не нуль min-height также отлично работает

Ответ 3

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

Ответ 4

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

.test1::before{
   content: "\200B";
}

Ответ 5

Он имеет ширину, но без содержимого или высоты. Добавьте атрибут height в класс test1.

Ответ 6

Существуют различные способы сделать пустой DIV с помощью float: left или float: right видимым.

Здесь представлены те, которые я знаю:

  • установить width (или min-width) с height (или min-height)
  • или установить padding-top
  • или установите padding-bottom
  • или установить border-top
  • или установить border-bottom
  • или используйте псевдоэлементы: ::before или ::after с:
    • {content: "\200B";}
    • или {content: "."; visibility: hidden;} {content: "."; visibility: hidden;}
  • или положить &nbsp; внутри DIV (иногда это может привести к неожиданным эффектам, например, в сочетании с text-decoration: underline;)

Ответ 7

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

Ответ 8

Слишком поздно, чтобы ответить, но тем не менее.

При использовании CSS для стилизации div (без содержимого) свойство min-height должно быть установлено равным "n" px, чтобы сделать div видимым (работает с webkit и chrome, но не уверен, будет ли этот трюк работать в IE6 и ниже)

Код:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>

Ответ 9

&#160; может сделать трюк; работает в документах XSL

Ответ 10

Вы добавляете в эту position: relative CSS DIV position: relative, он сделает всю работу.