Почему CSS text-align: left не работает с Simplebar? - PullRequest
Новая
       62

Почему CSS text-align: left не работает с Simplebar?

0 голосов
/ 27 мая 2020

Я столкнулся с проблемой с text-align: left: мои сообщения (текст) не выравниваются по левому краю. До сих пор я пробовал несколько вещей: добавление ширины: 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;
}

Ответы [ 3 ]

0 голосов
/ 27 мая 2020

Итак, есть небольшая вещь, которую вы можете сделать, чтобы решить вашу проблему, просто назовите свой универсальный код селектора прежде всего,

точно так же, 

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

Итак, в данном примере код, который написан ниже, то есть зеленый цвет, получит предпочтение, поэтому рекомендуется написать универсальный селектор в верхней части кода, а затем используйте все остальные вещи, которые вы хотите переписать под ним.

0 голосов
/ 27 мая 2020

просто удалите преобразование и абсолютное 

.history {
    /* position: absolute; */
    /* top: 210px; */
    /* left: 249px; */
    /* transform: translate(-50%, -50%); */
    height: 416px;
    text-align: left;
    width: 100%;
}
0 голосов
/ 27 мая 2020

Думаю, вам следует удалить 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>
...