it-swarm.com.ru

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

92
runeveryday

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

136
jcomeau_ictx

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

Правка:

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

81
ArK

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

60
riley

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

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

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

9
Michael

Существуют разные способы сделать пустой 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;)
5
simhumileco

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

1
DevenX

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

0
Daniel Forrest

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

При использовании 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>

0
Bhaskar Pramanik