web-dev-qa-db-ja.com

インライン要素の幅を設定する

<span>、<em>、<strong>などのインライン要素の幅を設定できますが、それらを配置するまで効果はありません。

a）インライン要素のインライン幅を設定できないと思いましたか？

b）幅を設定できると仮定-インライン要素を配置するまで、効果（つまり、指定した幅）に気付かないでしょう。位置/方法/場所

c）インライン要素の幅は、それらを「配置」するときにのみ明らかになるのはなぜですか？

htmlcssxhtml
43
SourceC

他の人が述べたように、インライン要素の幅（またはその他の位置関連のプロパティ）を設定すると、ブラウザは要素をブロック要素として表示します。

CSS displayプロパティを使用して、この種の動作を明示的に宣言できます。最も一般的な設定はdisplay: inline （デフォルト）、 display: block、およびdisplay: none。
displayプロパティの完全なリファレンスが利用可能です here 。

ただし、 HTML 4.01仕様 では、「HTML要素の従来の解釈をオーバーライドする」ことを推奨していません。

スタイルシートは、要素がブロックまたはインラインとしてレンダリングされるかどうかなど、任意の要素のレンダリングを指定する手段を提供します。リスト要素のインラインスタイルなどの場合、これは適切かもしれませんが、一般的に、著者はこの方法でHTML要素の従来の解釈をオーバーライドすることを推奨しません。

11
Donut

次のオプションもあります 表示：インラインブロック、両方の長所が得られるかもしれません。

52
charliepark

a）インライン要素の幅は無視されます

b、c）インライン要素を「配置」すると（position：absoluteを使用することを意味すると思います）、実際にはブロック要素になり、その幅はブラウザによって解釈されます

17
Flavius Stef

つまり、position: absoluteをインライン要素に適用すると、ブロック要素になり、幅が増加します。

7
n1313

「インライン」要素の位置属性を指定すると、その要素は表示されなくなり、inlineになり、代わりにブロックレベルの要素として扱われるためだと思います。

2
tj111

a。インライン要素の幅は無視されます。

b。実際には、display: inline-block;を設定すると要素に幅を適用できますが、結果を表示するにはoverflow: hidden;も適用する必要があります。

インラインタイプとブロックタイプのすべての利点を得るには、次のスニペットを使用できます。

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: Ellipsis;

この場合、幅を管理し、テキスト省略記号機能を使用できます。

0
alx lark

インライン要素に幅を持たせることはできません。幅はブロック要素のプロパティです。したがって、インライン要素または表示タイプがインラインセットの要素で幅のプロパティを使用するには、inline-blockとして表示します。例：display：inline-block;

0
Kartikeya kotnala