text-align属性失效求助：如何将导航文本设为最左对齐？

Hey John, I see the issue here! The problem isn't with your text-align: left declarations—those are actually working. The real culprit is the default padding that browsers apply to <ul> elements (usually around 40px on the left). This padding pushes the entire list inward, making your "Home" and "Academic Qualification" items look like they're not left-aligned, even though the text itself is left-aligned within the list items.

Here's how to fix it: add padding-left: 0; to your <ul> element to remove that default indentation. You can either target it directly in your CSS or add a class to the ul for more specificity.

Modified CSS & HTML Code #

<style>
.listAlign355 { 
  text-align: left; 
  background-color: blue; 
}
ul {
  padding-left: 0; /* This removes the default left padding */
}
li { 
  list-style-type: none; 
  text-align: left; 
}
</style>
<body>
<header>
<p>I am John.</p>
<div class="listAlign355">
<ul>
<li>Home</li>
<li>Academic Qualification</li>
</ul>
</div>
</header>
</body>

Why This Works #

• Browsers apply default user agent styles to elements like <ul> to add spacing—this is what was causing the visual indent. By setting padding-left: 0, you override that default.
• Your existing text-align: left on the <li> and .listAlign355 div is already doing its job, but the ul's padding was hiding the effect.

If you want to be more specific (to avoid affecting other unordered lists on your page), you can add a class to the ul instead:

ul.no-indent {
  padding-left: 0;
}

Then update your HTML to <ul class="no-indent">.

That should make your list items line up perfectly with the left edge of the blue div!

内容的提问来源于stack exchange，提问作者John Chau