Matching Indent Between "ul" Element and "p" Element in CSS
As you'll see in the code, I'm trying to match up the alignment of bullets with text, not text with text.
<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>
Of course, one could always "eye-ball", or visually estimate, it by creating a separate class for the "ul" element and changing the "pad开发者_JAVA百科ding-left" values, then compare the result among the 5 major browsers, but I'd like to find a way to do it with a language mechanism that is more accurate than the human eye.
That difference, typically, is 15px.
Take a look at this JS Fiddle: http://jsfiddle.net/HRN9J/1/
I suggest doing a CSS Reset, which will allow you to build on top of that without having the different browsers affect your code.
Here is one of possible solutions — specifying a list-style-position.
加载中,请稍侯......
精彩评论