Как сделать DIV без содержимого шириной? - PullRequest
Новая
       7

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

94 голосов
/ 13 ноября 2010

Я пытаюсь добавить ширину в 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>

Ответы [ 9 ]

138 голосов
/ 13 ноября 2010

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

82 голосов
/ 13 ноября 2010

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

EDIT:

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

60 голосов
/ 25 августа 2013

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

27 голосов
/ 03 декабря 2015

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

.test1::before{
   content: "\200B";
}
9 голосов
/ 13 ноября 2010

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

6 голосов
/ 12 апреля 2017

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

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

  • set 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;)
1 голос
/ 12 февраля 2018

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

При использовании 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>
1 голос
/ 26 ноября 2015

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

0 голосов
/ 01 сентября 2015

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

...