Как выровнять заголовки и неупорядоченные списки в 2 столбце div с помощью css - PullRequest
Новая
       19

Как выровнять заголовки и неупорядоченные списки в 2 столбце div с помощью css

2 голосов
/ 25 июня 2019

Я строю веб-сайт в Squarespace и использую блок кода, чтобы добавить текстовый блок с пользовательским стилем.Он содержит h2, h3 и неупорядоченный список.

У меня есть h2 по центру в div, хотя я пытаюсь выровнять h3 и неупорядоченный список в столбцах.Я включил ссылку на мою проблему: https://jsfiddle.net/5k4mo3fn/29/

Я относительно новичок в HTML и CSS, поэтому извините, если это легко решить.Я провел дальнейшие исследования и не могу найти подходящего решения.Я использую Google Chrome.

Я пытался добавить код из этого вопроса:

Разделить список на две колонки 

    <div style="background-color: #98CB52; padding: 25px; border-left: 6px solid #19764A; column-count: 2; column-fill: balance;">

https://jsfiddle.net/5k4mo3fn/29/

По сути, я бы хотел, чтобы h3 и все точки маркера были выровнены друг с другом.

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Вы также можете использовать макет сетки CSS также для достижения ваших результатов.

JSFiddle 

.main {
  background-color: #98CB52;
}

.title {
  padding: 1em;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  place-items: center;
}

.m-0 {
  margin: 0;
}
<div class="main">
  <div class="title">
    <h2 style="color: white; text-align: center; column-span: all;" class="m-0">What impact can I have?</h2>
  </div>
  <div class="content">
    <div>
      <h3 style="color: white;margin-left: 40px;" class="m-0">For corporations</h3>
      <ul style="color: white;">
        <li>Share neurodiverse practices, pitfalls and pivot points</li>
        <li>Learn how to design for diversity and retain quality staff</li>
        <li>Promote neurodiversity at work</li>
        <li>Sponsor summits or projects, gain exposure and connections</li>
        <li>Liaise with other executives and leading corporations in the field</li>
      </ul>
    </div>

    <div>
      <h3 style="color: white;margin-left: 40px;" class="m-0">For neurodiverse individuals</h3>
      <ul style="color: white;">
        <li>Share lived experience to bolster positive social change</li>
        <li>Learn employability skills</li>
        <li>Promote neurodiverse advocacy</li>
        <li>Be seen and valued for your neurodiversity</li>
        <li>Access beneficial resources</li>
        <li>Connect with employers, researchers and the community</li>
      </ul>
    </div>
  </div>
</div>
0 голосов
/ 25 июня 2019

Тег ul по умолчанию имеет значение padding. Уменьшение отступа приведет к выравниванию списка с вашими заголовками.

Я добавил padding-left: 20px к тегу ul.

JsFiddle link

...