ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSの左浮動小数点数の書き方は?

CSSの左浮動小数点数の書き方は?

青灯夜游
青灯夜游オリジナル
2019-05-31 13:31:4010131ブラウズ

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>

レンダリング:

CSSの左浮動小数点数の書き方は?

上の例では、ul 要素と要素を左にフロートさせます。 li 要素はインライン要素として表示され (要素の前後に改行はありません)、リストは強制的に 1 行になります。

ul 要素の幅の 100%、および各ハイパーリンク リストの 6 em (現在のフォント サイズの 6 倍)。また、色や枠線を追加して、より高級感のあるものにしました。

以上がCSSの左浮動小数点数の書き方は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。