Пули в списках с HTML и CSS - PullRequest
Новая
       72

Пули в списках с HTML и CSS

0 голосов
/ 08 октября 2019

Я хочу сделать HTML-документ с sidenotes (заметки на полях). Я нашел решение сделать плавающую рамку в правой части основного текста с определенным классом CSS во флаге <span>. Это работает отлично!

Теперь я хотел бы включить списки маркеров в эти примечания, но тогда мой список маркеров появится в основном тексте, а не в sidenote. См. Ниже:

enter image description here

Я также пытался отобразить диапазон как блок, но он ничего не изменил. Вот мой HTML-код для этого примера: 

body {
  margin-right: 400px
}

.sidenotes {
  float: right;
  clear: right;
  margin-top: 0;
  margin-bottom: 0;
  background: #558844;
  vertical-align: baseline;
  position: relative;
  border: solid black 1pt;
  width: 200px;
  display: block;
  margin-right: -250px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit eros ut ullamcorper vestibulum.
  <span class="sidenotes" style="display:block;">aaaa aaa aaa aa aaa aaa aaaa
    aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa </span> tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis ut mattis. Suspendisse nec .
  <p>
    <p>Donec accumsan,
      <span class="sidenotes" style="display:block;">bbbb b bb bbbb bbb bbb bbb bbb b
    <ul>
    <li><p >cccccc ccccccccc cccc</p></li>
    <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul></span> augue non pharetra imperdiet, nisi urna aliquam lorem, nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut id massa. Sed id ante risus. </p>

Я попытался использовать <div>, который дает правильный результат в примечании, но не в основном тексте. Разрыв строки в «Donec accumsan» (как стиль абзаца): 

<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit 
eros ut ullamcorper vestibulum.
<span class="sidenotes">aaaa aaa aaa aa aaa aaa aaaa
aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa</span> 
tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis 
ut mattis. Suspendisse nec .<p>
<p style="font-style:italic;">Donec accumsan, 
  <div class="sidenotes" ><p>bbbb b bb bbbb bbb bbb bbb bbb b</p>
    <ul>
      <li><p >cccccc ccccccccc cccc</p></li>
      <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul>
  </div> augue non pharetra imperdiet, nisi urna aliquam lorem, 
nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut 
id massa. Sed id ante risus.  </p>

, что дает:

enter image description here

У вас есть идея, как изменить мой код, чтобы разрешить абзацы, маркированные списки и нумерованные списки в моих идентификаторах, не прерывая строку в основном тексте?

Если нет, есть лиЕще один способ сделать побочные заметки (заметки на полях)?

1 Ответ

1 голос
/ 08 октября 2019

Не имеет смысла помещать свои заметки в середине абзаца, не говоря уже о середине предложения. Если вы хотите предоставить семантическую ссылку между контентом в абзаце и стороной, которой нет, используйте реальную ссылку a.

Как я уже упоминал в комментарии, вы не можете использовать тег ul или div mid p, поскольку вы можете использовать только фразовое содержимое в теге p. Использование любого другого элемента уровня блока приведет к закрытию тега p. См .: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Я бы добавил размещение примечаний после абзаца, к которому они относятся. Используя псевдо-класс :target, мы можем добавить верхний литерал в соответствующую сноску при нажатии на ссылку 

.sidenotes  {float:right; clear:right; background-color:#CCFFCC; width: 200px;}
.sidenotes:target{border:1px solid red;}
<div class="sidenotes" id="sidenote-a">aaaa aaa aaa aa aaa aaa aaaa
aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa</div> 
<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit 
eros ut ullamcorper <a href="#sidenote-a">vestibulum</a>.

tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis 
ut mattis. Suspendisse nec .<p>


 <div class="sidenotes" id="sidenote-b" ><p>bbbb b bb bbbb bbb bbb bbb bbb b</p>
    <ul>
      <li><p >cccccc ccccccccc cccc</p></li>
      <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul>
  </div>
<p style="font-style:italic;">Donec <a href="#sidenote-b">accumsan</a>, 
  augue non pharetra imperdiet, nisi urna aliquam lorem, 
nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut 
id massa. Sed id ante risus.  </p>
...