css - 寻找 CSS 将不同列表项的子项放在一行中，而不在列表项上 float ？

Question

我在一个遗留环境中工作，在这个环境中更改呈现到页面的 HTML 太具有挑战性。相反，我正在寻找一种 CSS 解决方案，以解决只有列表项的子项具有我可以使用的现有类的情况:

HTML结构

<ul>
    <li><div class="myobject">A</div></li>
    <li><div class="myobject">A</div></li>
    <li><div class="myobject">A</div></li>
</ul>
<ul>
    <li><div class="myobject floated">B</div></li>
    <li><div class="myobject floated">B</div></li>
    <li><div class="myobject floated">B</div></li>
</ul>

期望的输出

• A
• A
• A

BBB

我试过了

li {
    display:inline-block;
}
li > div {
    display:block;
}
li > div.floated {
    display:inline-block;
    float:left;
}

更新:我找到了一个适用于我的特定情况的纯 CSS 解决方案(如下)

Answer 1

我能够解决我的特殊情况，使用 div 默认提供元素符号，并使用额外的类将其带走。

ul {
    list-style:none; 
    margin:0;
    padding:0
}
li {
    display:inline;
}
li .myobject::before { /* add the new bullet point */
    display: inline-block;
    content: '';
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 0.25em;
    width: 0.25em;
    margin-right: 0.5rem;
    background-color: #000;
    position: relative;
    top: -0.2em;
}
li .floated {
    display:inline-block;
}
li .floated::before {
    height:0;
    width:0;
    background-color:transparent;
    margin-right:0;
}