Як зробити div без вмісту, має ширину?

110

Я намагаюся додати ширину до а 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>

— runeveryday
джерело

158

діву зазвичай потрібно принаймні нерозривний пробіл (& nbsp;), щоб мати ширину.

— jcomeau_ictx
джерело

28

використовувати "display: inline-block"

— Luccas

хороше рішення, якщо я використовую "" замість & nbsp; це не працює.але чому?

— Амітабха

1

'& nbsp;' це хороша техніка на відміну від мінімальної висоти, оскільки вона не примушує висоту. Скажімо, розмір шрифту встановлений на 16 пікселів, а накладка - 15 пікс. Ваш div збереже однакову висоту до і після того, як текст буде доданий до div (якщо припустити, що це все в одному рядку)

— eroedig

для мене розміщення місця не працює! div з шириною 100 px і всередині & nbsp; не схоже на 100 пікселів у діві з елементами вбудованих гнучких елементів

— Мікі

89

Або використовувати padding, heightабо &nbsp для ширини, щоб набути чинності з порожнімdiv

Редагувати:

Без нуля min-heightтакож чудово працює

— Арк
джерело

5

Я віддаю перевагу розчину для прокладки, будь-яка набивка більше 0 буде працювати. Таким чином, у вас немає дивного, обраного  в div.

— Брайан Данкан

1

Зверніть увагу: для розкладки для набивання потрібно передбачити як ліву / праву, так і верхню / нижню підкладки, щоб вона працювала.

— Говінд Рай

62

Використовувати min-height: 1px; Все має принаймні мінімальну висоту 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, щоб додати пробіл до нуля в ширину. Вміст діва не займе місця, але змусить його відобразитись

.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;до свого тесту1

— DevenX
джерело

1

Надто пізно відповісти, але все-таки.

Під час використання CSS для стилю div (без вмісту) властивість мінімальної висоти має бути встановлено на "n" px, щоб зробити div видимим (працює з веб-кодами та chrome, при цьому не впевнений, що цей трюк буде працювати в IE6 та нижній)

Код:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

Розгорніть фрагмент

— Бхаскар Праманик
джерело

0

 може зробити трюк; працює в документах XSL

— Даніель Форест
джерело

0

У мене було те саме питання. Я хотів, щоб іконки з’являлися натисканням кнопки, але без будь-якого руху і ковзання навколишнього середовища, як лампочка: увімкнено і вимкнено, з’являлося і зникало, тому мені потрібно було зробити порожній дів із фіксованими розмірами.

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

зробив трюк для мене

— смертельна смерть
джерело

-1

Ви додасте до цього CSS DIV position: relative, він зробить всю роботу.

— Кшиштоф А.Н.
джерело