Question

正如您在代码中看到的那样，我正在尝试将子弹与文本对齐，而不是将文本与文本对齐。

<html>
    <head>
        <style type="text/css">
            body
                {
                width: 6.5in;
                padding-left: 1in;
                padding-right: 1in;
                }
            .indent
                {
                padding-left: 50px;
                }
        </style>
    <head>

    <body>
        <p class="indent">As You can see, the indents match</p>
        <ul class="indent">
            <li>Unfortunately, this only works for for the text, not the bullets</li>
            <li>Of course, this isn't necessarily bad since this may be what somebody wants out of their indents and it is the default behavior</li>
            <li>Obviously, this isn't what I want, or else I wouldn't be posting to SO</li>
            <li>You've probably already figured this out by now, but I'll say it anyway: I'm trying to get the bullet of the unordered list element to match the alignment of the paragraph, not just the text</li>
            <li>If it still doesn't make sense, copy &amp; paste this code, view it in your favorite browser and then compare it to how the indents work in LibreOffice (I'm pretty sure MS Word works the same way as LO with indents & bullets; Google Docs works more like the default behavior)</li>
        </ul>
    </body>
</html>

当然，通过为“ul”元素创建一个单独的类并更改“padding-left”值，可以总是“眼球”或视觉估计，然后在5个主要浏览器中比较结果，但我想找到一种方法来使用比人眼更准确的语言机制。

Answer 1

这种差异通常是15px。

看看这个JS小提琴： http://jsfiddle.net/HRN9J/1/

我建议您使用CSS Reset，这样您就可以在不使用不同浏览器影响代码的情况下构建它。

Answer 2

Here是可能的解决方案之一 - 指定列表样式位置。

CSS中“ul”元素与“p”元素之间的匹配缩进

2 个答案: