可以为<li>的某些元素和其他元素提供list-style-type吗？</li>

Question

我有一份答案清单。我在每个列表项<li>里面都有答案编号，一个段落（“测试...”）和两个链接。

我希望在我的链接中有一个list-style-type: circle;。但我的链接不是<li>元素，它们位于<li>元素内。

你知道是否可以做这样的事情？

我的代码在这里：http://jsfiddle.net/x9ww2qpd/1/

Answer 1

所以只需要制作<li>个元素。例如：

<h4>Answer 1</h4>
<p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
<span>Saber mais:</span><br/>
<ul>
    <li><a href="#">Who are we?</a></li>
    <li><a href="#">Who are we?</a></li>
</ul>

您可以将有序/无序列表嵌套到您想要的任何深度。然后根据需要将CSS样式应用于列表。

Answer 2

如果您可以使用CSS3伪元素而不是嵌套ul li实现，则可以使用:before创建＆＃34; bullet＆＃34; 。这也可以让你更好地控制子弹的视觉风格和位置。

#answers ul li a{padding-left:30px; position:relative;}
#answers ul li a:before{content:" "; position:absolute; top:50%; left:24px; border-radius: 100%; background: black; height:4px; width:4px; margin:-4px;}

<强> FIDDLE DEMO

Answer 3

在不更改HTML的情况下，您始终可以使用:before pseudo element以及转义的content值'\2022'。只需相应地更改元素的font-size即可。

Example Here

#answers ul li a:before {
    content:'\2022';
    display: inline-block;
    padding-right: 10px;
}

Answer 4

如果您希望或需要在不更改HTML标记的情况下执行此操作，请将display属性设置为list-item，以便将要显示的元素设置为项目符号列表的项目并防止其影响<br/>标签。例如：

#answers a { display: list-item;  }
#answers br { display: none; }

请注意，这些会影响a块内的所有br和id="answers"元素。目前尚不清楚是否需要这样做。

关键是list-style-type只设置子弹或其他标记的样式（如果使用的话）。它不会导致标记出现。或者，换句话说，该属性仅影响具有display: list-item的元素。

更好的是，如果您可以更改标记，只需对要显示为项目符号列表的元素使用<ul>和<li>标记。

Answer 5

解决方案1 ​​

要使您的链接（1）看起来像列表项，（2）表现得像列表项，您应该设置该链接的display，list-style-type和list-style-position属性元件。

您还应该删除列表项后面的<br />元素。

示例代码：

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#answers{
    float:left;
    width:100%;
    margin-top:20px;
}

#answers ul{
    list-style:none;
}

#answers ul li{
    margin-bottom:30px;
}

#answers ul li a{
    display: list-item;
    list-style-position: inside;
    list-style-type: circle;
    margin-left:30px;
}

＆＃13;

<div id="answers">
    <ul>
        <li>
            <h4>Answer 1</h4>
            <p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
            <span>Saber mais:</span><br/>
            <a href="#">Who are we?</a>
            <a href="#">Who are we?</a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

THE FIDDLE：

<强> http://jsfiddle.net/x9ww2qpd/5/

解决方案2

作为解决方案1的替代方案，您只需将元素包装在列表元素中即可。

在这里，您还应该删除列表项目后面的<br />元素。为列表中的列表添加一些额外的样式。

示例代码：

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#answers{
    float:left;
    width:100%;
    margin-top:20px;
}

#answers ul{
    list-style:none;
}

#answers ul li{
    margin-bottom:30px;
}

#answers ul ul{
    list-style:circle;
    list-style-position: inside;
}

#answers ul ul li{
    margin-bottom:0;
    margin-left: 30px;
}

＆＃13;

<div id="answers">
    <ul>
        <li>
            <h4>Answer 1</h4>
            <p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
            <span>Saber mais:</span><br/>
            <ul>
                <li><a href="#">Who are we?</a></li>
                <li><a href="#">Who are we?</a></li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

THE FIDDLE：

<强> http://jsfiddle.net/x9ww2qpd/6/