为什么CSS text-align:left不能与Simplebar一起工作？

Question

我遇到了一个文本对齐的问题:左:我的消息(文本)没有左对齐。到目前为止，我已经尝试了几种方法:添加width:100%，float:left和display:block。不幸的是，它们都不起作用。我在想，simplebar可能会影响它，但我不知道它是如何影响的。如果你能以某种方式帮助我，我将不胜感激！下面是我的CSS和HTML：

<h2 id="receiver" name="{{receiver}}">Chat with {{receiver}}</h2>
    <div data-simplebar id="my-element" class="history">
      {% for message in hist_list %}
        {{message}}<br>
      {% endfor %}
    </div>

.history {
  position: absolute;
  top: 210px;
  left: 249px;
  transform: translate(-50%, -50%);
  height: 416px;
  text-align:left;
  width:100%;
}
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  text-align: center;
  font-family: 'Exo', sans-serif;
  color: black;
}

这是Simpebar，它可能会干扰我的CSS：

[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

Answer 1

我认为你应该从通用选择器中删除text-align:center;。希望下面的代码片段能有所帮助。

​

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
/*   text-align: center; */
  font-family: 'Exo', sans-serif;
  color: black;
}
#receiver{
  text-align:center;
}

.history {
  position: absolute;
  height: 416px;
  text-align:left;
  width:100%;
}


[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

<h2 id="receiver" name="">Chat with Name</h2>
<div data-simplebar id="my-element" class="history">
  <p>This is a message</p><br>
  <p>This is a message</p><br>
</div>

​

Answer 2

所以你可以做一件小事来解决你的问题，只需调用你的通用选择器代码，

就像这样，

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  text-align: center;
  font-family: 'Exo', sans-serif;
  color: black;
}
.history {
  position: absolute;
  top: 210px;
  left: 249px;
  transform: translate(-50%, -50%);
  height: 416px;
  text-align:left;
  width:100%;
}

CSS是级联的，它为之后编写的代码提供了优先级，只需查看这个小示例

​

p {color: red; font-size: 100px;}
p {color: green; font-size: 50px;}

<p>Test</p>

​

因此，在给定的示例中，下面编写的代码，即绿色的代码，将获得首选项，因此，最好在代码顶部编写通用选择器，然后在代码下面使用所有其他您想要覆盖的内容。

Answer 3

只需删除变换和绝对

.history {
    /* position: absolute; */
    /* top: 210px; */
    /* left: 249px; */
    /* transform: translate(-50%, -50%); */
    height: 416px;
    text-align: left;
    width: 100%;
}