Как сделать div без содержимого шириной?

110

Я пытаюсь добавить ширину к a 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>
бегать каждый день
источник

Ответы:

158

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

jcomeau_ictx
источник
28
используйте «display: inline-block»
Луккас
хорошее решение, если я использую "" вместо & nbsp; не работает но почему?
Amitābha
1
'& nbsp;' это хорошая техника в отличие от минимальной высоты, потому что она не определяет высоту. Скажем, ваш размер шрифта установлен на 16 пикселей, а ваш отступ - 15 пикселей. Ваш div сохранит ту же высоту до и после добавления текста в div (при условии, что он находится в одной строке)
eroedig
для меня размещение пробела не работает! div шириной 100 пикселей в пределах & nbsp; не похоже на то, чтобы быть 100px в div с гибкими встроенными элементами
Микки,
89

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

РЕДАКТИРОВАТЬ:

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

Ковчег
источник
5
Я предпочитаю решение для заполнения, любое заполнение больше 0 будет работать. Таким образом, у вас не будет странного, выбираемого &nbsp;в div.
Брайан Дункан,
1
Обратите внимание: для решения с заполнением вам необходимо предоставить отступы слева / справа и сверху / снизу, чтобы оно работало.
Говинд Рай
62

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

Райли
источник
2
Ваши решения кажутся мне самыми чистыми, но я пытался найти причину этого в спецификации CSS, и я не могу найти ее нигде, ближайший, который я нашел, находится CSS 2.1, 9.5 Floatsтам, где он говорит Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., но он говорит о строчных блоках, т.е. строках в абзаце, а не о соседних квадратах. Кто-нибудь более знаком со спецификацией CSS?
Хайме Хаблутцель
Это сработало для меня лучше всего. Я попробовал большинство других предложений, кроме & nbsp ;.
аяхуаска
28

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

.test1::before{
   content: "\200B";
}
Бернар В.
источник
9

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

Майкл
источник
7

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

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

DevenX
источник
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

Дэниел Форрест
источник
0

Я была такая же проблема. Я хотел, чтобы значки появлялись при нажатии кнопки, но без какого-либо движения и скольжения по окружению, как лампочка: включается и выключается, появляется и исчезает, поэтому мне нужно было создать пустой div с фиксированными размерами.

width: 13px;
min-width: 13px;

сделал трюк для меня

Deathfry
источник
-1

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

Кшиштоф А.Н.
источник