时间戳

首页 > 解决方案 > 如何在列表中设置列表样式

html - 如何在列表中设置列表样式

问题描述

我在另一个无序列表中有一个无序列表，被段落包围。我已将列表项的样式设置为大于其中的段落，但我希望列表中的列表与段落的大小相同。

这是一个例子：

p {
    font-family: sans-serif;
    font-size: 125%;
}
h3 {
    font-family: sans-serif;
    font-size: 170%;
    font-weight: bold;
}
li {
    font-family: sans-serif;
    font-size: 150%;
    font-style: italic;
}
li > ul > li {
    font-family: sans-serif;
    font-size: 16px;
    font-style: italic;
}
<h3>These are the top-most misconceptions about aromanticism:</h3>
    <ul>
        <li>That we are unfeeling or "cold fish"</li>
            <p>Nothing could be further from the truth. Just because we have no interest in romantic love does not make us any less funny, warm, kind or happy people.</p>
        <li>That we are lonely or have no love in our lives</li>
            <p>This is a huge misconception. Romantic love has been such a focus of movies, tv-shows, songs and books, that people forget that there are many other forms of love that are equally - if not more - important. For example:</p>
            <ul>
                <li>Self-love: Loving yourself, feeling good in your own skin.</li>
                <li>Familial love: Loving your family, whether that family is the one you're born into or choose for yourself</li>
                <li>Amicable love: Loving your friends. This, for aromantic people, is often a stronger bond than what non-aromantics experience, since friendship for us is not a temporary relationship that can fade once a "more important" romantic relationship starts.</li>
                <li>Love for animals</li>
                <li>Love for hobbies</li>
            </ul>
            <br>
        <li>That we are broken</li>

我试过了

li li, li > ul，尝试移动段落内的列表项，然后使用 p li

我什至尝试删除原始列表样式，只是想看看它是否阻止了它，但是没有一个列表得到任何样式。

请帮忙？

标签： htmlcss

解决方案

你怎么看待这件事？

p, .internal {
    font-family: sans-serif;
    font-size: 125%;
  font-style: normal;
}
h3 {
    font-family: sans-serif;
    font-size: 170%;
    font-weight: bold;
}
li {
    font-family: sans-serif;
    font-size: 150%;
    font-style: italic;
}
li > ul > li {
    font-family: sans-serif;
    font-size: 16px;
    font-style: italic;
}
<h3>These are the top-most misconceptions about aromanticism:</h3>
    <ul>
        <li>That we are unfeeling or "cold fish"</li>
            <p>Nothing could be further from the truth. Just because we have no interest in romantic love does not make us any less funny, warm, kind or happy people.</p>
        <li>That we are lonely or have no love in our lives</li>
            <p>This is a huge misconception. Romantic love has been such a focus of movies, tv-shows, songs and books, that people forget that there are many other forms of love that are equally - if not more - important. For example:</p>
            <ul>
                <li class="internal">Self-love: Loving yourself, feeling good in your own skin.</li>
                <li class="internal">Familial love: Loving your family, whether that family is the one you're born into or choose for yourself</li>
                <li class="internal">Amicable love: Loving your friends. This, for aromantic people, is often a stronger bond than what non-aromantics experience, since friendship for us is not a temporary relationship that can fade once a "more important" romantic relationship starts.</li>
                <li class="internal">Love for animals</li>
                <li class="internal">Love for hobbies</li>
            </ul>
            <br>
        <li>That we are broken</li>

我只是.internal在 internal 上添加了 class li，以使具有该 class 的元素具有相同的样式p。

编辑：添加font-style: normal以避免斜体显示p和.internal

推荐阅读