ホームページ > 記事 > ウェブフロントエンド > CSSの左浮動小数点数の書き方は?
CSS では、float 属性を使用して要素が浮動する方向を定義できます。左に浮動させたい場合は、float 属性の値を設定するだけです。要素を左に配置します (float:left)。 float 属性についてご紹介しますので、ご参考になれば幸いです。
css float 属性
float 属性は、ボックス (要素) を浮動させるかどうか、およびその方向を指定します。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
注: 絶対に配置された要素は float 属性を無視します。
構文:
float: left|right|none|inherit;
属性値:
left: 要素は左に移動します。
right: 要素は右にフロートします。
none: デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。
inherit: float 属性の値を親要素から継承することを指定します。
例: 要素を左にフロートに設定し、水平メニューを作成します
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300;} li {display:inline;} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> </body> </html>
レンダリング:
上の例では、ul 要素と要素を左にフロートさせます。 li 要素はインライン要素として表示され (要素の前後に改行はありません)、リストは強制的に 1 行になります。
ul 要素の幅の 100%、および各ハイパーリンク リストの 6 em (現在のフォント サイズの 6 倍)。また、色や枠線を追加して、より高級感のあるものにしました。
以上がCSSの左浮動小数点数の書き方は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。