web-dev-qa-db-ja.com

コンテンツのない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>
htmlcsswidthcss-float
96
runeveryday

divには通常、幅を持たせるために少なくとも改行なしスペース（nbsp;）が必要です。

141
jcomeau_ictx

幅にpadding、heightまたは&nbspを使用して、空のdivで有効にします

編集：

非ゼロmin-heightも素晴らしい

83
ArK

min-height: 1px;を使用してください。すべてが少なくとも1pxの最小高さを持っているので、nbspまたはパディングで余分なスペースが占有されることはありません。

61
riley

CSSを使用して、divにゼロ幅のスペースを追加します。 divのコンテンツはスペースを取りませんが、divを強制的に表示します

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

幅はありますが、内容や高さはありません。クラスtest1に高さ属性を追加します。

9
Michael

float: leftまたはfloat: rightを使用して空のDIVを表示するには、さまざまな方法があります。

ここに私が知っているものを示します：

  • width（またはmin-width）でheight（またはmin-height）を設定します
  • またはpadding-topを設定します
  • またはpadding-bottomを設定します
  • またはborder-topを設定します
  • またはborder-bottomを設定します
  • または擬似要素：::beforeまたは::after with：を使用します
    • {content: "\200B";}
    • または{content: "."; visibility: hidden;}
  • または&nbsp;をDIV内に配置します（これにより、たとえばtext-decoration: underline;と組み合わせて予期しない効果が生じることがあります）
6
simhumileco

答えるには遅すぎますが、それでもなお。

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
Bhaskar Pramanik

display:block;をtest1に追加してみてください

1
DevenX

このDIVのCSS position: relativeに追加すると、すべての作業が実行されます。

0
Krzysztof AN

&#160;がトリックを行うことがあります。 XSLドキュメントで動作します

0
Daniel Forrest