コンテンツのない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>
html  css  width  css-float 
— 毎日
ソース

回答:

158

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

— jcomeau_ictx
ソース
28
「display：inline-block」を使用
— Luccas
＆nbsp;の代わりに ""を使用する場合の良い解決策 それは機能しませんが、なぜですか？
— 阿弥陀
1
「＆nbsp;」高さを強制しないため、min-heightとは対照的に優れた手法です。font-sizeが16pxに設定され、パディングが15pxであるとしましょう。テキストがdivに追加される前と後のdivは同じ高さを保持します（すべてが1行にあると想定）
— eroedig
私には、スペースを入れてもうまくいきません！幅100pxの＆nbsp;内のdiv フレックスインライン要素のあるdivで100pxのように見えない
— Micky
89

使用するかpadding、heightまたは&nbsp 空で有効にするための幅div

編集：

非ゼロmin-heightも素晴らしい働きをします

— ArK
ソース
5
私はパディングソリューションを好みます。0より大きいパディングは機能します。そうすれば、あなたは奇妙な、選択はありません&nbsp;でしdiv。
— ブライアンダンカン
1
注意：パディングソリューションでは、左/右と上/下の両方のパディングを提供する必要があります。
— Govind Rai
62

min-height: 1px; すべてを使用する場合、少なくとも1pxの最小高さがあるため、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仕様に詳しい人はいますか？
— Jaime Hablutzel、2014
これは私にとって最も効果的でした。＆nbsp;を除いて、ここで他のほとんどの提案を試しました。
— アヤワスカ2015
28

CSSを使用して、divにゼロ幅スペースを追加します。divのコンテンツは場所を取らないが、divを強制的に表示する

.test1::before{
   content: "\200B";
}
— バーナードV
ソース
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;}
  • または&nbsp;DIV内に配置します（これにより、たとえばと組み合わせて予期しない効果が生じることがありますtext-decoration: underline;）
— Simhumileco
ソース
1

display:block;あなたのtest1 に追加してみてください

— DevenX
ソース
1

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

CSSを使用しているときにdivをスタイル設定するには（コンテンツなし）、divを表示するにはmin-heightプロパティを "n" pxに設定する必要があります（Webkitおよびchromeで動作しますが、このトリックがIE6およびより低い）

コード：

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>
スニペットを展開

— バスカープラマニク
ソース
0

同じ問題がありました。ボタンを押すだけでアイコンが表示されるようにしたいのですが、電球のように動きも環境もスライドせず、オンとオフが現れたり消えたりするため、固定サイズの空のdivを作成する必要がありました。 

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

私のためにトリックをしました

— デスフライ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.