ホームページ  >  記事  >  ウェブフロントエンド  >  CSS list-style-position 属性の使用方法

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

silencement
silencementオリジナル
2019-05-27 16:17:094731ブラウズ

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>

実行結果

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

以上がCSS list-style-position 属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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