如何在CSS中控制列表样式类型光盘的大小？

发布于 2024-12-13 10:09:16 字数 869 浏览 1 评论 0原文

首先是我的 HTML：

<ul class="moreLinks" >
    <div>More from Travelandleisure.com</div>

        <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

我知道我可以在非常小的 li 上应用字体大小，以便光盘对我来说看起来正确，然后将 css 应用到 li 内的“a”。但我不知道为什么这在我正在工作的网站上不起作用。我无法直接控制html。

我看到当我这样做时：

.farParentDiv ul li {
    list-style: disc inside none;
}

TO this:

.farParentDiv ul li {
    list-style-type: disc;
    font-size:10px;
}

现在将字体大小应用于“a”后，它可以在 Firebug 中工作。但来自我的 css 文件。我尝试了很多但很累。我可以在 css 文件中覆盖上面的内容，但不能像在 firebug 中那样直接更改它。请写出可能是什么问题？

我曾经在内部链接之前放置点 (.)，然后在其上应用 css 来控制光盘大小，但正如我所说，我无法控制 HTML。

原文

My HTML first:

<ul class="moreLinks" >
    <div>More from Travelandleisure.com</div>

        <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

I know that I can apply font-size on li very small so that disc look correct to me and then apply css to "a" inside li. But I do not know why this is not working on the site I am working. I cannot control the html directly.

I saw that when I make this:

.farParentDiv ul li {
    list-style: disc inside none;
}

TO this:

.farParentDiv ul li {
    list-style-type: disc;
    font-size:10px;
}

and now after applying font-size to "a", it works in Firebug. but from my css file. I tried a lot but tired. I can overwrite the above this in css file but cannot change it directly as I did in firebug. Please write what can be the problem?

I used to put dots (.) just before link inside and then apply css on that to control the disc size, but as I said, I cannot control the HTML.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清旖 2024-12-20 10:09:16

由于我不知道如何使用 CSS 仅控制列表标记大小，而且还没有人提供此功能，因此您可以使用 :before 内容来生成项目符号：

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

演示：http://jsfiddle.net/4wDL5/

这些标记仅限于出现在这个特定 CSS 的“内部”，尽管您可以更改它。这绝对不是最好的选择（浏览器必须支持生成的内容，因此不能使用 IE6 或 7），但它可能是最简单的 - 而且您可以选择任何您想要的标记字符。

如果您选择图像路线，请参阅 list-样式图像。

Since I don't know how to control only the list marker size with CSS and no one's offered this yet, you can use :before content to generate the bullets:

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

Demo: http://jsfiddle.net/4wDL5/

The markers are limited to appearing "inside" with this particular CSS, although you could change it. It's definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest - plus you can choose any character you want for the marker.

If you go the image route, see list-style-image.

回复收藏 0 原文

樱桃奶球 2024-12-20 10:09:16

在现代浏览器中，您可以使用 ::marker CSS像这样的伪元素：

.farParentDiv ul li::marker {
  font-size: 0.8em;
}

浏览器支持请参考：我可以使用::marker伪元素

In modern browsers you can use the ::marker CSS pseudo-element like this:

.farParentDiv ul li::marker {
  font-size: 0.8em;
}

For browser support, please refer to: Can I Use ::marker pseudo-element

回复收藏 0 原文

春夜浅 2024-12-20 10:09:16

我一直很幸运地使用背景图像，而不是相信所有浏览器都以完全相同的方式解释项目符号。这也可以让你严格控制子弹的大小。

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

另外，您可能希望将 DIV 移到 UL 之外。这是您现在拥有的无效标记。如果必须将列表头放在列表中，则可以使用列表头 LH。

I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

Also, you may want to move your DIV outside of the UL. It's invalid markup as you have it now. You can use a list header LH if you must have it inside the list.

回复收藏 0 原文

等风来 2024-12-20 10:09:16

如果您选择使用内联 SVG 来渲染项目符号，则可以使用 width 和 height 属性来控制其大小：

ul {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");
}

.x_alternative {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");
}

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

<ul class="x_alternative">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

单击此处查看 viewBox 的简单说明。

If you choose to use inline SVG to render your bullets, you can use width and height properties to control their size:

ul {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");
}

.x_alternative {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");
}

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

<ul class="x_alternative">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Click here for an easy explanation of the viewBox.

回复收藏 0 原文

哎呦我呸! 2024-12-20 10:09:16

尝试对 li 使用不同的字体大小，

.farParentDiv ul li {
   list-style-type: disc;
   font-size:20px;
}

.farParentDiv ul li a {
   font-size:10px;
}

这使我免于使用图像

try to use diffrent font-size for li and a

.farParentDiv ul li {
   list-style-type: disc;
   font-size:20px;
}

.farParentDiv ul li a {
   font-size:10px;
}

this saved me from using images

回复收藏 0 原文

梦巷 2024-12-20 10:09:16

我正在建立Kolja的答案，来解释viewBox如何工作

viewBox是一个坐标系。

语法： viewBox="posX posY width height"

viewBox="0 0 4 4" 将创建此坐标系统：

黄色区域为可见区域。

因此，如果您想将某些内容居中，那么您需要使用 viewBox='-2 -2 4 4'

我知道这看起来很荒谬，我也不明白他们为什么这样设计方式...

ul {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='.5' /></svg>");
}

.y {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}

.z {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}

Centered Circle (viewBox Method) [viewBox='-2 -2 4 4', circle r='1']:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:

<ul class="y">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:

<ul class="z">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

但还有一种更简单的方法，您可以使用 Circles cx 和 cy 属性。

.centered {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}

Centered Circle (cx/xy) Radius 20 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:

<ul class="centered_a">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

I am buliding up on Kolja's answer, to explain how viewBox works

The viewBox is a coordinate system.

Syntax: viewBox="posX posY width height"

viewBox="0 0 4 4" will create this coordinate system:

The yellow area is the visible area.

So if you like to center something in it, then you need to use viewBox='-2 -2 4 4'

I know it looks ridiculous and I also don't understand why they designed it this way...

ul {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='.5' /></svg>");
}

.y {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}

.z {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}

Centered Circle (viewBox Method) [viewBox='-2 -2 4 4', circle r='1']:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:

<ul class="y">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:

<ul class="z">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

But there is a much easier method, you can just use the circles cx and cy attributes.

.centered {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}

Centered Circle (cx/xy) Radius 20 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:

<ul class="centered_a">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

回复收藏 0 原文

只有影子陪我不离不弃 2024-12-20 10:09:16

除了使用自定义图像作为项目符号之外，您还可以以一种方式设置 ul 或 li 元素的样式，然后以不同的方式设置内容的样式，如此处所示。

好处是一方面缺乏图像，另一方面增加了控制。缺点是它往往涉及非语义标记，除非在已经需要锚点的情况下。

回复收藏 0 原文

谈情不如逗狗 2024-12-20 10:09:16

可以使用 text-indent 代替 position:absolute 来解决“内部”问题：

li {
    list-style: inherit;
    margin: 0 0 4px 9px;
    text-indent: -9px;
}
li:before {
    content: "· ";
}

http://jsfiddle.net/poselab/zEMLG/

Instead of using position: absolute, text-indent can be used to solve the "inside" problem:

li {
    list-style: inherit;
    margin: 0 0 4px 9px;
    text-indent: -9px;
}
li:before {
    content: "· ";
}

http://jsfiddle.net/poselab/zEMLG/

回复收藏 0 原文

友谊不毕业 2024-12-20 10:09:16

当我将 list-style-type: Disc; 添加到 ul 中，然后在 Google Chrome 版本 92.0.4515.131（官方版本）(arm64) 中，我看到这个。也许有些浏览器不支持这个伪元素。

我通过这个CSS修改了li盘大小：

.htmlRenderer ul li::marker {
  color: red;
  font-size: 12px;
}

但是请考虑这个新功能的支持范围：

When I add list-style-type: disc; to ul then in Google Chrome Version 92.0.4515.131 (Official Build) (arm64), I see this. maybe some browsers haven't been supported this pseudo-element.

I modified the li disc size by this CSS:

.htmlRenderer ul li::marker {
  color: red;
  font-size: 12px;
}

But please consider the support range of this new feature:

回复收藏 0 原文

流心雨 2024-12-20 10:09:16

我认为通过使用内容“.”；如果太大，点就会变得太方，因此我相信这是一个更好的解决方案，在这里您可以决定“圆盘”的大小而不影响字体大小。

li {
    list-style: none;
	  display: list-item;
	  margin-left: 50px;
}

li:before {
    content: "";
	  border: 5px #000 solid !important;
	  border-radius: 50px;
	  margin-top: 5px;
	  margin-left: -20px;
	  position: absolute;
}

<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>

您可以通过编辑边框 px 的大小来编辑磁盘的大小。您可以根据您给它的剩余边距来调整与文本的距离。以及通过编辑页边距顶部来调整 y 位置。

I think by using the content"."; The dot becomes too squared if made too big, thus I believe that this is a better solution, here you can decide the size of the "disc" without affecting the font size.

li {
    list-style: none;
	  display: list-item;
	  margin-left: 50px;
}

li:before {
    content: "";
	  border: 5px #000 solid !important;
	  border-radius: 50px;
	  margin-top: 5px;
	  margin-left: -20px;
	  position: absolute;
}

<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>

You edit the size of the disk by editing the size of the border px. and you can adjust the distance to the text by how much - margin left you give it. As well as adjust the y position by editing the margin top.

回复收藏 0 原文

你对谁都笑 2024-12-20 10:09:16

对我来说最简单的方法是使用 Unicode 字符，然后使用 span 标签对其进行样式设置。为了示例，我将使用内联 css，但您可以按照自己喜欢的方式进行操作。

例如。当我想使用方形项目符号并控制其颜色和大小时：

<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span>  HOME</a></li>

您可以在这里找到很多 unicode 项目符号：

http:// unicode-table.com/

我这样做是因为链接图像的项目符号对我来说似乎有点不必要。

Easiest way for me is to use Unicode Characters and then style them with span tags. I'm going to use inline css for the sake of the example, but you can do it whatever way you prefer.

eg. When I want to use a square bullet and control its color and size:

<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span>  HOME</a></li>

You can find lots of unicode bullets here:

http://unicode-table.com/

I do this because linking images for bullets seems a little unnecessary to me.

回复收藏 0 原文

娜些时光，永不杰束 2024-12-20 10:09:16

我很惊讶没有人提到 list-style-image 属性

ul {
    list-style-image: url('images/ico-list-bullet.png');
}

I'm surprised that no one has mentioned the list-style-image property

ul {
    list-style-image: url('images/ico-list-bullet.png');
}

回复收藏 0 原文

灯角 2024-12-20 10:09:16

您还可以使用 2D 变换。下面的代码片段对其进行了说明，其中列表缩放了 25%。

注意：此处使用 Bootstrap 的唯一目的是布局演示（效果前/后）。

ul#before {
}

ul#after {
  transform: scale(1.25);
}

div.container, div.row {
  padding: 20px;
}

ul {
  border: 6px solid #000000;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- HTML -->
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      Before
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      After (scale 25%)
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <ul id="before">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <ul id="after">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
  </div>
</div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

参考：

CSS3 2D 变换：兼容性矩阵

You can also use 2D transform. It is illustrated in the snippet below with a list being scaled by 25%.

Nota: Bootstrap is used here for the sole purpose of layouting the demo (before/after effect).

ul#before {
}

ul#after {
  transform: scale(1.25);
}

div.container, div.row {
  padding: 20px;
}

ul {
  border: 6px solid #000000;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- HTML -->
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      Before
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      After (scale 25%)
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <ul id="before">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <ul id="after">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
  </div>
</div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Reference:

CSS3 2D transform: compatibility matrix

回复收藏 0 原文

拥抱我好吗 2024-12-20 10:09:16

在这里，我附上了我的解决方案，该解决方案在响应式中也能完美工作，您可以非常轻松地控制子弹的大小。

body {
  font-family: Arial;
}

ul {
  list-style: none;
}

li {
  padding-left: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: normal;
}

ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
  border-radius: 100%;
  margin-right: 10px;
  margin-left: -15px; /* Same negative margin as li padding  */
}

<div><h3>More from Travelandleisure.com</h3></div>

<ul class="moreLinks" >
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

<h3>My example with lengthy text to show more clear result</h3>

<ul>
  <li>Quisque nibh mauris</li>
  <li>hired in he unable his thing rung and, in that films recommendation of the writing poster meticulous rewritten value comment finally, a the that low necessary fellow take fail then hope up, nor may needs better orthographic put took derisively to trumpet
    covered her be the offer, hotel would differences material. With mild, fact, the slide and, furnished as than with to the he she sides from where represent principles, in this ran derivative found was step after how to case privilege text a he tone
    inn so two through well, on is at knows, help people.</li>
  <li>Dictum lacinia dui</li>
  <li>Vestibulum dignissim imperdiet</li>
</ul>

谢谢

Here I am attaching my solution that works perfectly in responsive too and you can control the size of the bullet very easily.

body {
  font-family: Arial;
}

ul {
  list-style: none;
}

li {
  padding-left: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: normal;
}

ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
  border-radius: 100%;
  margin-right: 10px;
  margin-left: -15px; /* Same negative margin as li padding  */
}

<div><h3>More from Travelandleisure.com</h3></div>

<ul class="moreLinks" >
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

<h3>My example with lengthy text to show more clear result</h3>

<ul>
  <li>Quisque nibh mauris</li>
  <li>hired in he unable his thing rung and, in that films recommendation of the writing poster meticulous rewritten value comment finally, a the that low necessary fellow take fail then hope up, nor may needs better orthographic put took derisively to trumpet
    covered her be the offer, hotel would differences material. With mild, fact, the slide and, furnished as than with to the he she sides from where represent principles, in this ran derivative found was step after how to case privilege text a he tone
    inn so two through well, on is at knows, help people.</li>
  <li>Dictum lacinia dui</li>
  <li>Vestibulum dignissim imperdiet</li>
</ul>

Thanks

回复收藏 0 原文

~没有更多了~