Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Верстка страницы отображается без пробелов
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Верстка страницы отображается без пробелов

Страниц (1): [1]
 

1. mstdmstd - 09 Декабря, 2019 - 23:17:51 - перейти к сообщению
Всем привет!

Взгляните пожалуйста на верстку страницы http://vtasks[dot]my-demo-apps[dot]tk
Далее клик на элементе меню “events”

Я делаю с помощью списков (vue/cli 4 / Bootstrap 4.3 /flexbox) данные в 2 колонки и
проблема в том в тексте пробелы между лейблом и данными не отображаются: https://prnt[dot]sc/q89s1i
Верстка :
CODE (html):
скопировать код в буфер обмена
  1.                 <ul class="column_content_left_aligned">
  2.                         <li class="p-3" v-if="nextEvent.task_name">
  3.                                 <i :class="'i_link '+getHeaderIcon('task')" title="Event related task"></i>
  4.                                 <router-link :to="{ name: 'taskDetails', params: { slug: nextEvent.task_slug }  }" class="p-3 a_link" target="_blank">
  5.                                         <strong>{{ nextEvent.task_name }}</strong>
  6.                                 </router-link>
  7.  
  8.                         </li>
  9.  
  10.                         <li class="p-3">
  11.                                 Starts at <strong>{{ momentDatetime(nextEvent.at_time, jsMomentDatetimeFormat) }}</strong>
  12.                         </li>
  13.                         <li class="p-3 row_content_left_aligned" style="display: flex;align-self: flex-start">
  14.                                 <ul class="row_content_left_aligned">
  15.                                         <li class="row_content_left_aligned">
  16.                                                 Duration <strong>{{ nextEvent.duration }}</strong> min
  17.                                         </li>
  18.  
  19.                                         <li class="row_content_right_aligned">
  20.                                                 <strong>{{ getDictionaryLabel( nextEvent.access, eventAccessLabels ) }}</strong>&nbsp;access
  21.  
  22.                                         </li>
  23.                                 </ul>
  24.                         </li>
  25.  
  26.                 </ul>
  27.  
  28.  

Я делал верстку с помощью классов row_content_left_aligned и column_content_left_aligned
и единственный способ я нашел это у первого убрать display:flex - но тогда вертска совсем не работает...

А как правильно ?

Спасибо!
2. Sharonddavis - 31 Июля, 2023 - 17:39:05 - перейти к сообщению
Если у вас есть классы row_content_left_aligned и column_content_left_aligned, и вы хотите изменить стиль для выравнивания элементов без полного нарушения верстки, то вам необязательно удалять display: flex. Вместо этого вы можете переопределить стили для нужных элементов с помощью дополнительных CSS-правил.

Вот как это можно сделать:

Сначала, убедитесь, что у вас есть базовый контейнер с классом row_content_left_aligned, который использует display: flex для выравнивания дочерних элементов по горизонтали.
css
Copy code
.row_content_left_aligned {
display: flex;
justify-content: flex-start; /* Это выравнивание по горизонтали слева */
align-items: center; /* Это выравнивание по вертикали по центру, можно заменить на flex-start или flex-end, чтобы выровнять по верхнему или нижнему краю */
}
Затем, у вас, вероятно, есть элементы с классом column_content_left_aligned, которые находятся внутри контейнера с классом row_content_left_aligned и используют flex-direction: column, чтобы располагаться вертикально.
css
Copy code
.column_content_left_aligned {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Выравнивание по вертикали, начиная с верхнего края */
align-items: flex-start; /* Выравнивание по горизонтали, начиная с левого края */
}
Таким образом, вы сохраняете применение display: flex и задаете специфичные выравнивания для элементов внутри контейнеров.

Важно помнить, что CSS-правила применяются в соответствии с приоритетами селекторов. Убедитесь, что вашим новым CSS-правилам устанавливается одинаковый или более высокий приоритет, чем стили, которые вы хотите переопределить. Если вы хотите, чтобы новые стили имели больший приоритет, используйте более специфичные селекторы или добавьте !important после значений свойств (хотя !important следует использовать осторожно, чтобы не создавать проблем с поддерживаемостью кода).

 

Powered by ExBB FM 1.0 RC1