Question

考虑这个标记：

<ul>
    <li>
        <div id="container">
            <button>toggle display</button>
            <div>text</div>
            <div>text</div>
        </div>
    </li>
</ul>

假设#container元素的计算CSS display值为block，则列表项标记（项目符号•）将呈现在内容的第一行旁边（到<button>）的左侧。

现在，如果#container的{{1}} CSS属性更改为display，则列表项标记将显示在最后一行文本旁边。见test case。（在Chrome 35和Firefox 30中测试过）。

是否可以在这两种情况下将项目标记呈现在同一位置？（最好在使用inline-block容器呈现的位置）

经过一些摆弄后，项目标记位置似乎受display: block元素inline-block的影响。例如，在vertical-align元素中设置vertical-align: top会使标记靠近#container元素的左上角，但标记定位仍然存在差异{{ 1}}属性不适用于inline-block元素。

是否有解决方案使子弹渲染在完全相同的位置，与vertical-align的{{1}}属性无关？

我更喜欢仅使用CSS的解决方案，但编辑标记也是可以接受的。

Answer 1

根据http://www.w3.org/TR/CSS21/visudet.html：

'inline-table'的基线是表格第一行的基线。

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

另见这两个演示：

http://www.brunildo.org/test/inline-block.html

http://www.brunildo.org/test/inline-block2.html

似乎block和inline-table具有相同的基线。因此，使用inline-table代替inline-block可以解决此问题。

Answer 2

这是一种肮脏的方式：

li {
    list-style-type: none;
}
li::before {
    content: "\25CF";
    margin-left: -20px;
    position: absolute; # thanks to DRD
}

Answer 3

首先让我说，我不明白为什么子弹在内联块内的最后一个块中被归零。但是，如果您将内联块中的块更改为table，那么这似乎可以解决问题：http://jsfiddle.net/3BYKp/1/。

#container > div {
    display: table;
}

Answer 4

一种可能的解决方案是使用#container元素包裹inline-block：

.container-outer {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

Fiddle

这样，子弹相对于这个新的外部inline-block元素定位，其显示不会改变，从而达到所需的一致性。

唯一的缺点是子弹与元素的顶部对齐（由于inline-block显示和vertical-align: top），而不是第一行内容，因为它与{ {1}}元素，但这几乎不可知。

列表项标记位置不一致，具体取决于子项的显示属性

4 个答案: