From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/list-style-position/index.html | 162 +++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/zh-cn/web/css/list-style-position/index.html (limited to 'files/zh-cn/web/css/list-style-position') diff --git a/files/zh-cn/web/css/list-style-position/index.html b/files/zh-cn/web/css/list-style-position/index.html new file mode 100644 index 0000000000..eb83b0b108 --- /dev/null +++ b/files/zh-cn/web/css/list-style-position/index.html @@ -0,0 +1,162 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +translation_of: Web/CSS/list-style-position +--- +
{{CSSRef}}
+ +

 list-style-position 属性指定标记框在主体块框中的位置。

+ +

使用助记符{{cssxref("list-style")}}更方便。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+list-style-position: inside;
+list-style-position: outside;
+
+/* Global values */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+
+ +

数值

+ +
+
outside
+
标记盒在主块盒的外面。
+
inside
+
标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

Result

+ +

{{EmbedLiveSample("例子","200","420")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}{{Spec2('CSS3 Lists')}}No change.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf