正如您将在代码中看到的,我正在尝试使元素符号与文本对齐,而不是文本与文本对齐。
<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 & 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/