Как сделать 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 будет работать. Таким образом, у вас не будет странного, выбираемого  в 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;}
или поместить  внутрь 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

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

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

0

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

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

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

— Deathfry
источник

-1

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

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