Как сделать текстовое поле меньше, не смещая его вниз? - PullRequest
Новая
       6

Как сделать текстовое поле меньше, не смещая его вниз?

0 голосов
/ 11 февраля 2019

Я делаю проект для freecodecamp, где мне нужно сделать проект, подобный этому примеру .

Моя проблема - часть внизу с неупорядоченным списком и заголовкомнад ним.Какой css может выровнять поле заголовка так же, как в примере?Я пытался использовать margin, но это изменило поле по вертикали, а не только влево и вправо.

Текущий код: 

<div id=“timeline”>
  <h4>Here's a timeline of Dr. Borlaug's life</h4>
  <ul>
    <li>example</li>
    <li>example</li>
    <li>example</li>
    <li>example</li>
  </ul>
</div>

Если есть что-то лишнее, чего мне не хватает, дайте мне знать, и я уточню.

1 Ответ

0 голосов
/ 11 февраля 2019

Есть несколько способов сделать это, но если вы пытаетесь сопоставить пример сайта, который вы предоставили, тогда ваши CSS и HTML должны выглядеть примерно так: 

<div id=“timeline”>
  <ul>
    <h4>Here's a timeline of Dr. Borlaug's life</h4>
    <li>example</li>
    <li>example</li>
    <li>example</li>
    <li>example</li>
  </ul>
</div>


ul {
  max-width: 550px;
  margin: 0 auto;
  text-align: left;
}

Пример используемого кода:https://jsfiddle.net/o96uayxc/1/

Люди из freeCodeCamp применили максимальную ширину к списку, а затем использовали margin: 0 auto; для центрирования элемента.Это связано с тем, что поле со значением auto автоматически заполняет пустое пространство с обеих сторон элемента.Важно отметить, что заголовок находится внутри элемента списка в их примере, который удерживает его в пределах этой максимальной ширины.Текст элемента выравнивается по левому краю, что обеспечивает одинаковое выравнивание всех элементов.

...