html - CSS中 "ul"元素和 "p"元素之间的匹配缩进

标签 html css

正如您将在代码中看到的,我正在尝试使元素符号与文本对齐,而不是文本与文本对齐。

<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 个主要浏览器的结果,但我想找到一种方法来使用比人眼更准确的语言机制。

最佳答案

这种差异通常为 15 像素。

看看这个 JS Fiddle: http://jsfiddle.net/HRN9J/1/

我建议做一个 CSS Reset ,这将允许您在此基础上进行构建,而不会受到不同浏览器影响您的代码。

关于html - CSS中 "ul"元素和 "p"元素之间的匹配缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7198732/

相关文章:

javascript - 为什么 firefox 会在 codepen 中白化页面?

html - 使用 Bootstrap 在警报中定位按钮

php - <ul><li> 点击显示/隐藏子菜单

html - 是否真的不可能使 div 的大小适合其内容?

c++ - 使用 C++ 创建 HTML 报告

html - 页面宽度比我设置的大?

css - gmail 如何接受用户名

html - 跨度在流体行中起作用

html - 如何在div中的文本中间制作span元素

html - 固定标题区域不起作用