Вопросы Теги

Flexbox стилизация текста выноски

Вы можете использовать это: [None] * 10. Но это не будет «фиксированный размер», который вы все еще можете добавить, удалить ... Вот как делаются списки.

Вы можете сделать его кортежем (tuple([None] * 10)), чтобы исправить его ширину, но опять же, вы не сможете его изменить (не во всех случаях, только если сохраненные элементы изменяются).

Другой вариант, ближе к вашему требованию, не является списком, а collections.deque с максимальной длиной. Это максимальный размер, но он может быть меньше. 

import collections
max_4_items = collections.deque([None] * 4, maxlen=4)

Но просто используйте список и привыкните к «питоническому» способу делать вещи.

0
задан markthekoala 17 March 2019 в 21:40
поделиться

2 ответа

padding-left должны сделать свое дело!

РЕДАКТИРОВАТЬ: Как упоминалось @arieljuod, <em> также может быть использован. Таким образом, 2 <div> больше не нужны. 

.call-out-text {
  flex 1;
  width: 100%;

  padding-left: 10px;
  border-left: 5px solid blue;
}

// EDIT
em {
  padding-left: 10px;
  border-left: 5px solid blue;
}


html, body {
 /*  https://material.io/design/typography/the-type-system.html# */
/* light: 300; regular: 400; medium: 500*/

  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: normal;

/*  this sets 1rem = 16px*/
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
/*  border:1px solid rgba(250,0,0,1);*/
}

p {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

div .call-out {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  
}

em {
  padding-left: 10px;
  border-left: 5px solid blue;
}

.call-out-text {
  flex 1;
  width: 100%;
  
  padding-left: 10px;
  border-left: 5px solid blue;
}
<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>

  <!-- light: 300; regular: 400; medium: 500 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

<div class="wrap">
  <article>
    <p>ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>

    
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <!-- EDIT -->
    <em>Qwerty!</em>
    
    <!-- Original option -->
    <div class="call-out">
      <div class="call-out-text">
        <p><i>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</i></p>
      </div>
    </div>

    <p>Now we are back to normal text...</p>
  </article>
</div>

0
ответ дан 0stone0 17 March 2019 в 21:40
поделиться

Похоже, что вы можете добиться этого, используя только CSS (border-left и padding-left). Есть ли причина использовать этот гибкий хак? И я бы порекомендовал вам использовать тег «EM», используемый для выделения частей текста, он будет семантически лучше. 

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

<p><em>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</em></p>

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

А потом просто отступы и границы 

p em {
  padding-left: 10px;
  border-left: 10px solid blue;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

0
ответ дан arieljuod 17 March 2019 в 21:40
поделиться