web-dev-qa-db-ja.com

100％幅のない表示ブロック

Displayプロパティを使用して、span要素を別の要素の下に表示するように設定します。私はインラインブロックを適用しようとしましたが、成功しませんでしたが、何らかの方法で要素に100％の幅を与えることを避けることができればブロックを使用できると考えました（要素を「伸ばして」欲しくない）。これを行うことができますか？

例：各投稿の最後に「続きを読む」リンクを設定するニュースリスト（注：<a>の代わりに<span>）

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>


更新：解決しました。 CSSで、適用

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}
htmlwidthblockcss
78
Staffan Estberg

あなたの質問を正しく理解している場合、次のCSSはあなたのaをスパンの下に浮かせ、100％の幅を持たないようにします：

a {
    display: block; 
    float: left; 
    clear: left; 
}
62
PJ McCormick

display: tableを使用します。

この回答は少なくとも30文字でなければなりません。 20を入力したので、ここにもう少しあります。

136
ha404

次を使用できます。

width: max-content;

注：サポートは制限されています。サポートされているブラウザの完全な内訳については、 こちらで確認してください

17
Mustafa J

各行を独自のdivに保持するため、...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

CSSの場合：

.cell{display:inline-block}

元のコードを見ずにソリューションを提供することは困難です。

7
George

繰り返しますが、少し遅すぎるかもしれない答えです（とにかくこのページで答えを見つけた人のために）。

display:block;の代わりにdisplay:inline-block;を使用します

4
Renske

これを試して：

li a {
    width: 0px;
    white-space:nowrap;
}
2
Roberto

私はこの問題を抱えていたので、次のように解決しました：

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space：nowrap"は、十分なスペースがない場合に、子の子（ある場合）が改行に折り返されないようにします。

「空白：nowrap」なし：

enter image description here

「white-space：nowrap」の場合：

enter image description here

編集：それは私にとっても子ブロック部分なしで動作するようですので、これだけでうまくいくようです。

.parent {
  white-space: nowrap;
  display: table;
}
1
Noob

スパンをdisplay: blockとして設定し、含まれるwidth要素にliを設定することはできませんか？

0
Jon Hudson