如何在 >中减少子弹和文本之间的默认间隙?

how to reduce default gap between bullet and text in <li>?

如何在

>中减少子弹和文本之间的默认间隙?

Item 1
第一项
Item 2
第二项
Item 3
项目3

I want to reduce gap between bullet an I

我想缩小子弹和I之间的距离

14 个解决方案

#1

I'm not sure whether this is the best way to do it, but you could specify a negative text-indent:

我不确定这是否是最好的方法，但您可以指定一个负面的文本缩进:

li {
    text-indent: -4px;
}

...where your HTML code looks like:

…HTML代码如下所示:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

(Tested in Safari 4.0.4 and Firefox 3.0.11.)

(在Safari 4.0.4和Firefox 3.0.11中测试)

#2

You could achieve this by setting the list-style-type to none, and setting the background-image of a list element to a generic bullet, like so:

您可以通过将list-style类型设置为none，并将list元素的背景图像设置为通用的子弹头来实现这一点，如下所示:

ul {
    list-style-type: none;
}

li {
    background-image: url(bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 7px;
}

The outcome would look a little something like this:

结果会是这样的:

如何在 >中减少子弹和文本之间的默认间隙?

With this approach, you aren't adding unnecessary span (or other) elements to your lists, which is arguably more practical (for later extendibility and other semantic reasons).

使用这种方法，您不会向列表中添加不必要的span(或其他)元素，这可能更实用(因为以后的可扩展性和其他语义原因)。

#3

You could try the following. But it requires you to put a <span> element inside the <li> elements

您可以尝试以下方法。但是它要求您将元素放入

元素中

<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;

}
</style>
</head>

<body>

<ul class="a">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Coca Cola</span></li>
</ul>
</body>
</html>

#4

I've tried these and other solutions offered, which don't actually work, but I seem to have found a way to do this, and that is to remove the bullet and use the :before pseudo-element to put a Unicode bullet in its place. Then you can adjust the the space between the list item and bullet. You have to use Unicode to insert an entity into the content property of :before or :after - HTML entities don't work.

我已经尝试过这些解决方案和其他提供的解决方案，但实际上并不奏效，但是我似乎找到了一种方法来实现这一点，那就是删除子弹并使用:before伪元素来替换Unicode子弹。然后你可以调整列表项和子弹之间的空间。必须使用Unicode将实体插入到:before或:after - HTML实体不工作的内容属性中。

There's some sizing and positioning code needed too, because the Unicode bullet by default displays the size of a pinhead. So the bullet has to be enlarged and absolutely positioned to get it into place. Note the use of ems for the bullet's sizing and positioning so that the bullet's relationship to the list item stays constant when your change the font size of the list item. The comments in the code explain how it all works. If you want to use a different entity, you can find a list of the Unicode entities here:

也需要一些调整大小和定位代码，因为Unicode子弹默认显示针头的大小。所以子弹必须被放大并且绝对的定位以使它到位。注意，子弹的大小和位置使用ems，以便当您更改列表项的字体大小时，子弹与列表项的关系保持不变。代码中的注释解释了它是如何工作的。如果您想使用不同的实体，可以在这里找到Unicode实体的列表:

http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Use a value from the far right column (octal) from the table on this page - you just need the \ and number. You should be able to trash everying except the content property from the :before rule when using the other entities as they seem to display at a useable size. Email me: charles at stylinwithcss dot com with any thoughts/comments. I tested it Firefox, Chrome and Safari and it works nicely.

使用来自该页表的最右列(八进制)的值—您只需使用\和数字。当使用其他实体时，您应该能够删除除:before规则中的内容属性之外的所有内容，因为它们似乎以可用的大小显示。给我发邮件:查理斯在stylinwithcss dot com有任何想法/评论。我测试了它Firefox、Chrome和Safari，它运行得很好。

    body {
      font-family:"Trebuchet MS", sans-serif;
      }
    li  {
      font-size:14px;        /* set font size of list item and bullet here */
      list-style-type:none; /* removes default bullet */
      position:relative;      /* positioning context for bullet */
      }
      li:before  {
        content:"\2219";    /* escaped unicode character */
        font-size:2.5em;    /* the default unicode bullet size is very small */
        line-height:0;        /* kills huge line height on resized bullet */
        position:absolute;  /* position bullet relative to list item */
        top:.23em;           /* vertical align bullet position relative to list item */
        left:-.5em;            /* position the bullet L- R relative to list item */
       }

#5

If in every li you have only one row of text you can put text indent on li. Like this :

如果在每个li中只有一行文本，则可以在li上进行文本缩进。是这样的:

ul {
  list-style: disc;
}
ul li {
   text-indent: 5px;
}

或

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}

#6

This is one way.

这是方法之一。

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

#7

You might try using:

你可以试着用:

li {list-style-position: inside; }

But I can't remember if that adjusts the space, or changes where the space occurs.

但我不记得它是调整了空间，还是改变了空间发生的地方。

Edited

The above doesn't seem to make any substantial difference. There doesn't seem to be any way to decrease the space between the list-style-type marker and the text, though it can be increased using margin-left or text-indent.

以上这些似乎没有什么实质性的区别。似乎没有任何方法可以减少列表样式标记和文本之间的空间，尽管可以使用margin-left或text-indent来增加它。

Sorry I can't be of more use.

对不起，我不能再帮你了。

Edited

Just out of curiosity, how about 'faking' the bullet with a background image?

出于好奇，用背景图片假装子弹怎么样?

ul {list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
       margin: 0;
       padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}

It might allow for more fine-tuning.

它可能允许进行更多的微调。

#8

I needed to do this inline, and combined a few of the above to make it work right for me. I'm working inside a div and wanted to use an image:

我需要内联地完成这个操作，并结合上面的一些操作，使它适合我。我在一个div里工作，想用一个图片:

The padding under the UL told the bullet where to start from the left margin of the div it's in. I use em for better accessibility/flexibility, but you could use px too. If it doesn't seem to move much with px, use a much larger px value (for me, just moving it in a cm was 60px!).

UL下方的填充物告诉子弹从它所在的div左边开始。我使用em以获得更好的可访问性/灵活性，但是您也可以使用px。如果它在px上移动的不多，那就用一个更大的px(对我来说，用cm移动就是60px!)

The text-indent tells the bullet how close to get to the text it's next to.

文本缩进告诉子弹如何接近它旁边的文本。

Hope it works for you! :)

希望对你有用!:)

#9

Reduce text-indent to a negative number to decrease the space between the list item's bullet and its text.

将文本缩进减为负数，以减少列表项的项目符号与其文本之间的空间。

li {
  text-indent: -4px;
}

You can also use margin-left to adjust any space between the list-item's bullet and the edge of its surrounding element.

您还可以使用左边框来调整列表项的子弹与其周围元素的边缘之间的任何空间。

li {
  margin-left: 24px;
}

Both text-indent and padding-left can add space between the bullet and text, but only text-indent can reduce space to negative.

text-indent和padding-left都可以在bullet和text之间增加空格，但是只有text-indent才能将空格减少到负值。

~~li { padding-left: -4px; } /* Doesn't work. */~~

#10

I have <a> inside the <li>s.

在

s中有。

年代中有。

To the <ul> elements, apply the following CSS:

对于

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

To the <a> elements, apply the following CSS:

对于元素，应用以下CSS:

a:before {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

This creates pseudo elements for the bullets. They can be styled just like any other elements.

这为子弹创建了伪元素。它们可以像其他元素一样进行样式化。

I've implemented it here: http://www.cssdesk.com/R2AvX

我在这里实现了它:http://www.cssdesk.com/R2AvX

#11

Here You Go with Fiddle:

这是小提琴

FIDDLE

HTML:

HTML:

<ol>
        <li>List 1          
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 2
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 3</li>
</ol>

CSS:

CSS:

ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}

#12

Here's how to do it.

这是怎么做的。

Multi-line works perfectly if you do it this way. Bullet will automatically size with text. Indent is straight-forward: it's just the padding-left on the li. Minimal CSS required.

如果你这样做，多行就很好了。子弹将自动与文本大小。缩进是直接的:它只是划子的左边。最小的CSS。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > li {
  position: relative;
  padding-left: 12px;
}
ul > li:before {
  content: "•";
  position: absolute;
  left: 0;
}
div {
  border: 1px solid #ccc;
}

<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
    <li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
    <li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
  </ul>
</div>

#13

To achieve the look I wanted, I made a div containing a basic UL and several LIs. I couldn't easily adjust the indent between the bullet and text with any of the suggested ideas above (technically possible, but not simple.) I just left the UL and LI without any listing feature (list-style-type: none) then adding a • to the beginning of each line. It did give me a bit of trouble at first, it only displayed the first bullet, so I added a bullet character to the end of the first line, refreshed, then removed it and they all popped up. Just manually add a bullet HTML entity if you don't want a huge indent, add space HTML entities if you want more space :o I know it isn't the best method, but it worked for me.

为了实现我想要的外观，我制作了一个包含基本UL和几个LIs的div。我无法通过上面的任何建议(技术上可能，但并不简单)来轻松调整子弹和文本之间的缩进。我刚刚离开UL和LI，没有任何上市特性(列表样式类型:none)，然后添加了•到每一行的开头。它一开始确实给我带来了一些麻烦，它只显示了第一个子弹，所以我在第一行的末尾添加了一个子弹字符，刷新了它，然后删除了它，它们都出现了。如果你不想要一个巨大的缩进，只需手动添加一个项目HTML实体，如果你想要更多的空间，可以添加空间HTML实体。

#14

Here's yet another way.

这是另一种方法。

Add two divs to each li, one for the bullet, one for the text.
在每个li上增加两个divs，一个表示子弹，一个表示文本。
Put a bullet character • (or whatever you like, Unicode has plenty) in the bullet div. Put the text in the text div.
在弹珠div中加入一个弹珠字符•(或者你喜欢的任何东西，Unicode有很多)。
Set each li to display:flex.
设置每个li显示:flex。

Pros:

优点:

No extra bullet image to add.
没有额外的子弹图像添加。
No negative margins or anything, won't go outside of parent.
没有负边距或任何东西，不会超出父母的范围。
Works on any browser that supports flexbox.
适用于任何支持flexbox的浏览器。
Proper indentation of multiline items.
多行项目的适当缩进。
Use of bullet character means bullet will always be properly vertically aligned with text, no tweaks necessary.
使用子弹字符意味着子弹将始终正确的垂直对齐文本，没有必要的调整。

Cons:

缺点:

Requires extra elements.
需要额外的元素。

Also, if you don't want to hand code all the extra divs, you can just make a normal list and then run this function to transform it, passing your ul as the parameter:

另外，如果您不想手工编写所有额外的div，您可以创建一个普通的列表，然后运行这个函数来转换它，传递您的ul作为参数:

function fixList (theList) {
  theList.find('li').each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

Example:

例子:

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex; /* set to desired spacing */
}

<ul>
  <li><div>•</div><div>First list item.</div>
  <li><div>•</div><div>Second list item.<br>It's on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>

Here's an example using the function:

这里有一个使用函数的例子:

fixList($('ul'));

function fixList (theList) {
  $('li', theList).each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>

#1

I'm not sure whether this is the best way to do it, but you could specify a negative text-indent:

我不确定这是否是最好的方法，但您可以指定一个负面的文本缩进:

li {
    text-indent: -4px;
}

...where your HTML code looks like:

…HTML代码如下所示:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

(Tested in Safari 4.0.4 and Firefox 3.0.11.)

(在Safari 4.0.4和Firefox 3.0.11中测试)

#2

You could achieve this by setting the list-style-type to none, and setting the background-image of a list element to a generic bullet, like so:

您可以通过将list-style类型设置为none，并将list元素的背景图像设置为通用的子弹头来实现这一点，如下所示:

ul {
    list-style-type: none;
}

li {
    background-image: url(bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 7px;
}

The outcome would look a little something like this:

结果会是这样的:

如何在 >中减少子弹和文本之间的默认间隙?

With this approach, you aren't adding unnecessary span (or other) elements to your lists, which is arguably more practical (for later extendibility and other semantic reasons).

使用这种方法，您不会向列表中添加不必要的span(或其他)元素，这可能更实用(因为以后的可扩展性和其他语义原因)。

#3

You could try the following. But it requires you to put a <span> element inside the <li> elements

您可以尝试以下方法。但是它要求您将元素放入

元素中

<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;

}
</style>
</head>

<body>

<ul class="a">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Coca Cola</span></li>
</ul>
</body>
</html>

#4

http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

    body {
      font-family:"Trebuchet MS", sans-serif;
      }
    li  {
      font-size:14px;        /* set font size of list item and bullet here */
      list-style-type:none; /* removes default bullet */
      position:relative;      /* positioning context for bullet */
      }
      li:before  {
        content:"\2219";    /* escaped unicode character */
        font-size:2.5em;    /* the default unicode bullet size is very small */
        line-height:0;        /* kills huge line height on resized bullet */
        position:absolute;  /* position bullet relative to list item */
        top:.23em;           /* vertical align bullet position relative to list item */
        left:-.5em;            /* position the bullet L- R relative to list item */
       }

#5

If in every li you have only one row of text you can put text indent on li. Like this :

如果在每个li中只有一行文本，则可以在li上进行文本缩进。是这样的:

ul {
  list-style: disc;
}
ul li {
   text-indent: 5px;
}

或

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}

#6

This is one way.

这是方法之一。

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

#7

You might try using:

你可以试着用:

li {list-style-position: inside; }

But I can't remember if that adjusts the space, or changes where the space occurs.

但我不记得它是调整了空间，还是改变了空间发生的地方。

Edited

以上这些似乎没有什么实质性的区别。似乎没有任何方法可以减少列表样式标记和文本之间的空间，尽管可以使用margin-left或text-indent来增加它。

Sorry I can't be of more use.

对不起，我不能再帮你了。

Edited

Just out of curiosity, how about 'faking' the bullet with a background image?

出于好奇，用背景图片假装子弹怎么样?

ul {list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
       margin: 0;
       padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}

It might allow for more fine-tuning.

它可能允许进行更多的微调。

#8

I needed to do this inline, and combined a few of the above to make it work right for me. I'm working inside a div and wanted to use an image:

我需要内联地完成这个操作，并结合上面的一些操作，使它适合我。我在一个div里工作，想用一个图片:

The text-indent tells the bullet how close to get to the text it's next to.

文本缩进告诉子弹如何接近它旁边的文本。

Hope it works for you! :)

希望对你有用!:)

#9

Reduce text-indent to a negative number to decrease the space between the list item's bullet and its text.

将文本缩进减为负数，以减少列表项的项目符号与其文本之间的空间。

li {
  text-indent: -4px;
}

You can also use margin-left to adjust any space between the list-item's bullet and the edge of its surrounding element.

您还可以使用左边框来调整列表项的子弹与其周围元素的边缘之间的任何空间。

li {
  margin-left: 24px;
}

Both text-indent and padding-left can add space between the bullet and text, but only text-indent can reduce space to negative.

text-indent和padding-left都可以在bullet和text之间增加空格，但是只有text-indent才能将空格减少到负值。

~~li { padding-left: -4px; } /* Doesn't work. */~~

#10

I have <a> inside the <li>s.

在

s中有。

年代中有。

To the <ul> elements, apply the following CSS:

对于

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

To the <a> elements, apply the following CSS:

对于元素，应用以下CSS:

a:before {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

This creates pseudo elements for the bullets. They can be styled just like any other elements.

这为子弹创建了伪元素。它们可以像其他元素一样进行样式化。

I've implemented it here: http://www.cssdesk.com/R2AvX

我在这里实现了它:http://www.cssdesk.com/R2AvX

#11

Here You Go with Fiddle:

这是小提琴

FIDDLE

HTML:

HTML:

<ol>
        <li>List 1          
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 2
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 3</li>
</ol>

CSS:

CSS:

ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}

#12

Here's how to do it.

这是怎么做的。

Multi-line works perfectly if you do it this way. Bullet will automatically size with text. Indent is straight-forward: it's just the padding-left on the li. Minimal CSS required.

如果你这样做，多行就很好了。子弹将自动与文本大小。缩进是直接的:它只是划子的左边。最小的CSS。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > li {
  position: relative;
  padding-left: 12px;
}
ul > li:before {
  content: "•";
  position: absolute;
  left: 0;
}
div {
  border: 1px solid #ccc;
}

<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
    <li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
    <li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
  </ul>
</div>

#13

#14

Here's yet another way.

这是另一种方法。

Add two divs to each li, one for the bullet, one for the text.
在每个li上增加两个divs，一个表示子弹，一个表示文本。
Put a bullet character • (or whatever you like, Unicode has plenty) in the bullet div. Put the text in the text div.
在弹珠div中加入一个弹珠字符•(或者你喜欢的任何东西，Unicode有很多)。
Set each li to display:flex.
设置每个li显示:flex。

Pros:

优点:

No extra bullet image to add.
没有额外的子弹图像添加。
No negative margins or anything, won't go outside of parent.
没有负边距或任何东西，不会超出父母的范围。
Works on any browser that supports flexbox.
适用于任何支持flexbox的浏览器。
Proper indentation of multiline items.
多行项目的适当缩进。
Use of bullet character means bullet will always be properly vertically aligned with text, no tweaks necessary.
使用子弹字符意味着子弹将始终正确的垂直对齐文本，没有必要的调整。

Cons:

缺点:

Requires extra elements.
需要额外的元素。

Also, if you don't want to hand code all the extra divs, you can just make a normal list and then run this function to transform it, passing your ul as the parameter:

另外，如果您不想手工编写所有额外的div，您可以创建一个普通的列表，然后运行这个函数来转换它，传递您的ul作为参数:

function fixList (theList) {
  theList.find('li').each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

Example:

例子:

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex; /* set to desired spacing */
}

<ul>
  <li><div>•</div><div>First list item.</div>
  <li><div>•</div><div>Second list item.<br>It's on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>

Here's an example using the function:

这里有一个使用函数的例子:

fixList($('ul'));

function fixList (theList) {
  $('li', theList).each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>

秒客网

如何在 >中减少子弹和文本之间的默认间隙?

14 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

FIDDLE

#12

#13

#14

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

FIDDLE

#12

#13

#14

相关文章