Обоснуйте подпункты с помощью маркеров - PullRequest
Новая
       15

Обоснуйте подпункты с помощью маркеров

0 голосов
/ 21 марта 2019

Решено!
Я установил поле на 0 (вместо 0 авто) и добавил отступ слева для каждого отдельного li в моем упорядоченном списке type = "a".

Начальный вопрос
У меня есть список нумерованных маркеров с типом маркеров (например, a, b, c), например:

text.html

<div class="content-section">
  <ol> 
    <li>this is a sample text that stretches across the page
       and it takes up the second line</li>
    <ol type="a"> 
      <li>this is a sample text that stretches across the page</li>
      <li>this is a sample text that stretches across the page</li>
      <li>this is a sample text that stretches across the page</li>
    </ol>
    <li>this is a sample text that stretches across the page
        and it takes up the second line</li>
    <ol type="a"> 
       <li>this is a sample text that stretches across the page</li>
       <li>this is a sample text that stretches across the page</li>
       <li>this is a sample text that stretches across the page</li>
     </ol>
   <ol>
<div>

text.css 

.content-section {
  p,
  li {
    max-width: 900px;
    text-align: justify;
    margin: 0 auto;
    color: $color-hint;
  }
}

Как это выглядит: 

1) this is a sample text that stretches across the page
   and it takes up the second line
   a. this is a sample text that stretches across the page
   b. this is a sample text that stretches across the page
   c. this is a sample text that stretches across the page
2) this is a sample text that stretches across the page
   and it takes up the second line
   a. this is a sample text that stretches across the page
   b. this is a sample text that stretches across the page
   c. this is a sample text that stretches across the page

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

Есть идеи, как мне это сделать?Я попытался настроить отступы и поля, но это не работает

1 Ответ

0 голосов
/ 21 марта 2019

Я бы сделал это с HTML 

<p>1) This is sample Text</p>
<ol type = "a" id = "bullet">
  <li>Sample Text</li>
  <li>Sample Text</li>
  <li>Sample Text</li>
</ol>
<p>2) This is sample text</p>
<ol type = "a" id = "bullet">
  <li>Sample Text</li>
  <li>Sample Text</li>
  <li>Sample Text</li>
</ol>

Затем добавьте это в CSS 

#bullet{
left:10px;
}

Может не понадобиться CSS, хотя списки автоматически отступают

...