<div> 或 <li> 的 CSS text-align 属性 [重复]答案

【问题标题】：CSS text-align property for <div> or <li> [duplicate]<div> 或 <li> 的 CSS text-align 属性 [重复]
【发布时间】：2019-10-24 03:59:06
【问题描述】：

文本对齐不起作用

我希望将“家庭”和“学历”这两个词放在最左边。据我所知，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>

【问题讨论】：

我很确定这是重复的，但我似乎找不到具有相同问题的原件。
哦。对不起...我真的试图通过在线搜索大约40分钟来弄清楚但仍然无法弄清楚，然后我在这里问了。

标签： html css

【解决方案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>

【讨论】：

我明白了。衷心感谢您的帮助。

【解决方案2】：

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

<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>

【讨论】：

我明白了。衷心感谢您的帮助。

【解决方案3】：

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

 ul {
     padding-left:0;
    }

还有另一个建议是，将所有项目的边距和内边距设置为零，并为每个项目添加必要的边距和内边距，通过添加这行代码不会与默认值混淆

* {
  margin: 0;
  padding: 0;
}

* 表示所有标签

【讨论】：

我明白了。衷心感谢您的帮助。

【解决方案4】：

一些元素有默认的边距或内边距。 <ul> 在这种情况下有一个默认的 padding-left。你可以删除它

ul{
     padding-left:0;
}

在开始样式之前进行以下样式重置是一个好习惯。在 CSS 的开头添加以下内容：

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

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

【讨论】：

我明白了。衷心感谢您的帮助。