CSS list-style-position 属性の使用方法-CSSチュートリアル-php.cn

CSS list-style-position 属性の使用方法

silencement

リリース： 2019-05-27 16:17:09

オリジナル

4780 人が閲覧しました

CSS list-style-position 属性の使用方法

css list-style-position 属性の定義と使用法

CSS では、list-style-position 属性を使用して配置場所を設定しますリスト項目のコンテンツに対する相対的なリストマークの位置を宣言する場所のリスト項目マーク。外側のマークはリスト項目の境界線から一定の距離に配置されますが、この距離は CSS では定義されていません. 内側のマークリスト項目のコンテンツの先頭に挿入されたインライン要素であるかのように扱われます。

すべてのブラウザは list-style-position 属性をサポートしますが、Internet Explorer のどのバージョン (IE8 を含む) も属性値 "inherit" をサポートしません。

複数のリスト属性を同時に設定する必要がある場合は、list-style 属性を使用して、list-style-type (リスト項目マークのタイプ) を設定できます。、1 つのステートメントで同時にリスト -style-position (リスト項目マークアップを配置する場所)、list-style-image (リスト項目マークアップを置き換える画像) プロパティ。

css list-style-position 属性の構文形式

css 構文: list-style-position: inside/outside/inherit

JavaScript 構文: object.style.listStylePosition="inside"

属性値の説明

inside: リスト項目マークはテキスト内に配置され、周囲のテキストはマークに従って整列

##outside: デフォルト値、マークはテキストの左側に維持され、リスト項目マークはテキストの外側に配置され、周囲のテキストはマーク

に従って整列されません。

inherit: 親要素から list-style-position を継承属性値

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css list-style-position属性笔记</title>
<style type="text/css">
.inside {list-style-position: inside}
.outside {list-style-position: outside}
</style>
</head>
<body>
<p> "inside"：</p>
<ul class="inside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<p> "outside"：</p>
<ul class="outside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>

ログイン後にコピー

実行結果