css - 我的 div 内容不会像我的 css 指定的那样左对齐

Question

我正在尝试使我的内容在 div 内左对齐...代码在下面...我做了一次这项工作，但丢失了代码。现在我想不通了。

html5:

<div class="wrapper materials">
<section id="materials">

然后我制作一个文章标签，然后我创建文章内容，包括 h 标签、p 标签等。然后我关闭标签，然后我关闭 div

CSS：

.materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

材料包装器中的文本保持居中，但我希望它左对齐。

score 0 · Accepted Answer

首先，您使用materialsasclass和 anid所以如果您的目标是持有materialsas的元素id，那么您需要使用#materials而不是.materials

#materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

除此之外，这里唯一可能的事情是你可能有一些更具体的选择器覆盖你的 CSS 块，尝试使用

#materials {
   text-align: left;
}

score 0 · Accepted Answer

你的班级.wrapper有text-align: center. 建议根据案例使用来查看和简化您的样式表。例如，您希望在 class 的元素中居中什么文本.wrapper？如果您指定这些情况，则只有包装器中的那些元素将居中。

或者，如果您希望.wrapper除了.materials居中之外的所有内容，请按如下方式指定：

.wrapper.materials {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

通过以这种方式将两者结合起来，您是在告诉浏览器不要在它们不同的地方选择一个类，而是将它们视为一种特殊的、明确的情况。

2 回答 2