为什么 CSS text-align:left 不能与 Simplebar 一起使用？答案

【问题标题】：Why doesn't CSS text-align:left work with Simplebar?为什么 CSS text-align:left 不能与 Simplebar 一起使用？
【发布时间】：2020-05-28 02:12:50
【问题描述】：

我遇到了 text-align:left 的问题：我的消息（文本）没有向左对齐。到目前为止，我已经尝试了几件事：添加宽度：100%、浮动：左以及显示：块。不幸的是，他们都没有工作。我在想可能是 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;
}

【问题讨论】：

标签： html css text-align simplebar

【解决方案1】：

我认为您应该从通用选择器中删除 text-align:center;。希望下面的 sn-p 有所帮助。

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

【讨论】：

这个有效！十分感谢！它实际上非常简单......我很遗憾没有自己想出它！
每个人都会犯错 :) 我很高兴我的回答有帮助。祝你好运！

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

&lt;p&gt;Test&lt;/p&gt;

所以在给定的示例中，下面编写的代码，即绿色的代码，将获得偏好，因此在代码顶部编写通用选择器然后使用所有其他你想要的东西是一个很好的做法在它下面改写。

【讨论】：

我不同意“你只能做一件事”的说法——尽管这可能是最干净、最简单的解决方法。
@SwimmerF 同意你的观点，其实我不是那个意思，换了我真正的意思。
我的通用选择器实际上是写在我的代码的顶部，但我把它放在下面，对不起。无论如何，谢谢！

【解决方案3】：

只需删除变换和绝对

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

【讨论】：