Отображение маркера в стиле списка - PullRequest
Новая
       7

Отображение маркера в стиле списка

0 голосов
/ 09 октября 2018

Я пытаюсь создать список навигации боковой панели, содержащий другой список, содержимое которого отображается / скрывается при нажатии.Для li, содержащего свернутый список, я вставил пользовательский list-style-image (на самом деле, два, которые переключаются между JS при нажатии.) Проблема в том, что пользовательское изображение отображается на краю страницы, а не влиния, где будет обычная точка пули.Изображение имеет прозрачный фон, так что это не проблема.Может быть это что-то с тем, как я плыл div влево?Вот мои HTML и CSS и скриншот того, как они отображаются.

Фрагменты кода (css / html): 

    #sidebar{
      position: fixed;
      float: left;
      width: 20%;
      background-color: green;
    }

    #main{
      float: right;
      width: 75%;
      background-color: blue;
    }

    #songs{
      margin-bottom: 0;
    }

    .song{
      list-style: decimal;
    }

    .songclosed{
      display: none;
    }

    .closed{
      list-style-image: url("../images/closed.png");
    }

    .open{
      list-style-image: url("../images/open.png");
    }
<div id="sidebar">
      <ul>
        <li>
          <p>Home</p>
        </li>
        <li>
          <a href="info.html">Info</a>
        </li>
        <li id="openclose" class="closed" onclick="openclose()">
          <p id="songs">Songs</p>
          <ol>
            <li class="song songclosed">
              <a href="#">Song 1</a>
            </li>
            <li class="song songclosed">
              <a href="#">Song 2</a>
            </li>
            <li class="song songclosed">
              <a href="#">Song 3</a>
            </li>
          </ol>
        </li>
      </ul>
    </div>

Изображение - Видите маленький черный треугольник слева?

Я пробовал list-style-position: inside иoverflow: hidden.Оба имели значение, но ни один не работал должным образом.

Последнее замечание: изображения больше (100x100), чем обычная точка маркера, так что это может быть небольшой проблемой, но я могу отредактировать их и посмотреть, что изменится, есликто-то может сказать мне, насколько велика обычная пуля.

...