Question

文本对齐不起作用

我希望将“家庭”和“学术资格”一词放在最左边。据我所知，div和li标签称为块元素，它占据了整个宽度。然后，我不知道为什么我不能将“家庭”和“学术资格”这两个词对齐。衷心感谢您的帮助。谢谢

<style>
 .listAlign355{     
    text-align: left;
    background-color: blue;
  }
  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>

Answer 1

您应将padding设置为ul。因为ul具有默认填充。

.listAlign355 {     
  text-align: left;
  background-color: blue;
}

/* I added */
ul {
  padding-left:0;
}

li {
  list-style-type: none;
  text-align:left;
}

  <header>
       <p>I am John.</p>
        <div class="listAlign355">         
           <ul>
              <li>Home</li>
               <li>Academic Qualification</li>
            </ul>
        </div>
    </header>

Answer 2

您可以使用ul删除padding-inline-start: 0;的默认填充。

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

Answer 3

列表具有默认填充，因此您可以将其设置为零以使其与左侧对齐

 ul {
     padding-left:0;
    }

还有另一种建议您将所有项目的边距和填充设置为零，并为每个项目添加必要的边距和填充，而不必通过添加此行代码而与默认项目混淆

* {
  margin: 0;
  padding: 0;
}

*表示所有标签

Answer 4

某些元素具有默认边距或填充。 <ul>在这种情况下具有默认的padding-left。您可以通过以下方式将其删除：

ul{
     padding-left:0;
}

在开始样式设置之前，最好先进行以下样式重置。在CSS的开头添加以下内容：

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
 }

这将删除每个元素的所有默认边距和填充，以便您可以完全控制样式。

<div>或<li>的CSS文本对齐属性

4 个答案: