Маржа не применяется к многострочному тексту во всем классе

Это html-код

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br /><span class = "sectionToc">25 <a 
    href = "#x1-2600025" id = "QQ2-1-26">URLs,Hyperlinks and Bookmarks</a></span>
<br /><span class = "sectionToc">26 <a 
    href = "#x1-2700026" id = "QQ2-1-27">Header and Footer</a></span>
<br />&#x00A0;<span class = "subsectionToc">26.1 <a 
    href = "#x1-2800026.1" id = "QQ2-1-28">Header and Footer for all pages</a></span>
<br />&#x00A0;<span class = "subsectionToc">26.2 <a 
    href = "#x1-2900026.2" id = "QQ2-1-29">Customising Headers and Footers for different pages</a></span>
<br /><span class = "sectionToc">

Проблема в том, что при изменении размера окна (например, на мобильном устройстве) вторая строка в подразделе не имеет поля слева. Например, попробуйте изменить размер окна и посмотрите, как будет отображаться подраздел 26.2. Вторая строка не имеет запаса. Он не наследует маржу от своего родительского класса.

html css css-selectors

24.06.2018 14:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

246

Ответы 2

Проблема в том, что диапазон .subsectionToc охватывает несколько строк, поэтому ширина слишком мала. Вам нужен элемент с display:block, а не inline. <div> подойдет. Тогда вам также не понадобятся промежуточные <br>.

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<div class = "sectionToc">
  25 <a href = "#x1-2600025" id = "QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<div class = "sectionToc">
  26 <a href = "#x1-2700026" id = "QQ2-1-27">Header and Footer</a>
</div>
<div class = "subsectionToc">
  26.1 <a href = "#x1-2800026.1" id = "QQ2-1-28">Header and Footer for all pages</a>
</div>
<div class = "subsectionToc">
  26.2 <a href = "#x1-2900026.2" id = "QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<div class = "sectionToc">

Кроме того, margin не передается по наследству.

24.06.2018 15:08

Вот как работает span: он переходит на следующую строку только из-за переполнения, но на экране мобильного телефона строка ниже также является частью той же строки. Таким образом, поля будут действовать только в начале строки.

Измените все span на div, если вы хотите, чтобы они были выровнены по одному и тому же полю. А также используйте негатив margin-top, чтобы он выглядел красиво.

Вот JSFiddle и код ниже:

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
  margin-top: -10px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
  margin-top: -30px;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br />
<div class = "sectionToc">25 <a href = "#x1-2600025" id = "QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<br />
<div class = "sectionToc">26 <a href = "#x1-2700026" id = "QQ2-1-27">Header and Footer</a>
</div>
<br />&#x00A0;
<div class = "subsectionToc">26.1 <a href = "#x1-2800026.1" id = "QQ2-1-28">Header and Footer for all pages</a>
</div>
<br />&#x00A0;
<div class = "subsectionToc">26.2 <a href = "#x1-2900026.2" id = "QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<br />

24.06.2018 15:08

Другие вопросы по теме

Bootstrap 4 выравнивает div влево и вправо, для маленького экрана показывать их в отдельных строках

Как выровнять столбец по горизонтали в Materialize CSS?

Как установить атрибут в процентах в jQuery?

Исправлена навигационная панель, скрывающая контент при переходе от навигации к части страницы

Как показать мои пользовательские продукты woocommerce в 4 столбцах?

Не могу понять CSS Flexbox в этой ситуации

Как преобразовать предложение с заглавной буквы в первое слово в верхнем регистре?

Css удалить пунктирную линию вокруг логотипа

Как выбрать текущую открытую ссылку в css?

CSS позиционирование 2 div - прокрутка до конца более короткого

Маржа не применяется к многострочному тексту во всем классе

Ответы 2

Другие вопросы по теме

Похожие вопросы