CSSの左浮動小数点数の書き方は？-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2019-06-03 15:07:43

オリジナル

10101 人が閲覧しました

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の左浮動小数点数の書き方は？