スパン幅設定

不言

リリース： 2018-06-12 11:43:30

オリジナル

1954 人が閲覧しました

HTMLでスパンの幅を設定するにはどうすればよいですか?これは非常に単純な問題のようで、style で width 属性を使用するだけでよいようです。

スパンの幅設定はデフォルトでは無効です
HTMLでスパンの幅を設定するにはどうすればよいですか?これは非常に単純な問題のようで、style で width 属性を使用するだけでよいようです。たとえば、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

ログイン後にコピー

は、Firefox でも IE でも動作しないことがテストの結果判明しました。

CSS2 標準の幅の定義を調べると、オブジェクトがインラインオブジェクトの場合、CSS の幅属性が常に有効であるとは限らないことがわかりました。 Firefox と IE は当初、標準に従ってこれを行っていました。
スパンをブロックタイプに変更し、floatを設定することは完璧な解決策ではありません
スパンのCSSに表示属性を追加し、スパンをブロックタイプの要素に設定します。この方法では幅は確かに効果的ですが、同時に分離されます。前後のテキストを別の行に配置します。このようにして、span は実際には完全に p になります。

span { background-color:#ffcc00; display:block; width:150px; }

ログイン後にコピー

多くの人が、別の CSS 属性 float を追加することを提案します。これにより、特定の条件下で実際に問題を解決できます。たとえば、この例では、span の前にテキストがない場合、実際に実行可能です。ただし、存在する場合は、前後のテキストが結合され、span は 2 行目まで実行されます。

span { 
background-color:#ffcc00; 
display:block; 
float:left; 
width:150px; 
}

ログイン後にコピー

ボタンの状況
実はHTMLの様々な要素の中には、インラインかつ幅を設定できる状況が確かにあります。たとえば、次のコードは、テキストの中央に表示して幅を設定できるボタンオブジェクトを表示します。

<body> 
fixed <button style="width:150px;">width</button> button 
</body>

ログイン後にコピー

スパンをボタンのように表示できますか？ CSS2 標準における表示の定義とインラインオブジェクトの説明を通じて、CSS2 標準の作成者は、すべての要素がインラインに属するか、インラインまたはブロックに属するかに関する二者択一の規定を設けており、そのようなものは存在しないことがわかりました。ボタンとしてインラインでブロックと同様にwidth属性値を設定できます。

標準 CSS 2.1 の更新

更新された標準を見ると、CSS2.1 標準ドラフトの表示の定義に inline-block という属性値が追加されており、まさに私たちが直面している状況です。次に、さまざまなブラウザの対応状況を見てみましょう。

Firefox

将来Firefox 3でインラインブロックが実装されることをディスプレイのドキュメントから知りました。 Mozllia 拡張属性リファレンスを通じて、現在の Firefox 2 など、Firefox 3 より前のバージョンでは、-moz-inline-box を使用して同じ効果を実現できることがわかりました。

IE

MSDN の表示ドキュメントを通じて、インラインブロックが実装されていることを知りました。実際にテストしてみたところ、IE 6.0以降では問題ないことが分かりました。

完璧な解決策

次のコードの CSS 定義は、スパン幅設定の問題を完全に解決します。ブラウザは通常、サポートされていない CSS プロパティを無視するため、Firefox で将来の Firefox 3 に達した場合にこの行が機能するように、最後に display:inline -block 行を記述するのが最善です。このコードはさまざまなバージョンと互換性があります。同時に。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
display:-moz-inline-box; 
display:inline-block; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。