css - 使用 ":before"制作的元素符号的 Ul li - 如何缩进第二行文本

Question

我有一个最多包含四个子级别的列表。元素符号是用 :before 制作的。我在将第二行文本与第一行对齐时遇到了一些问题。

我试过像这样设置填充和文本缩进:

ul {
  padding-left: 1em;
  text-indent: -1em;
}

- 但它不起作用。设置 list-style-position: outside 似乎也不起作用。

JSFIDDLE这里

有什么想法吗？

Answer 1

最好使用 position: absolute 而不是 float 来对齐元素符号。

.menu {
  width: 250px;
}
ul.nav>li>a {
  position: relative;
}
/* First level */
ul.nav>li>a:before {
  position: absolute;
  font-family: 'Glyphicons Halflings';
  font-size: 7px;
  color: #901a1e;
  content: "\e080";
  border: 1px solid #d7d7d7;
  left: 0;
  top: 13px;
}
/* Sub levels */
ul.nav>li ul li>a {
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
  position: relative;
}
ul.nav>li ul li>a:before {
  position: absolute;
  font-size: 9px;
  color: #901a1e;
  content: "\25A0";
  left: 0;
  top: 3px;
}

ul li {
  list-style-type: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="menu">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sub menu here</a>
      <ul>
        <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
        <li class="active"><a href="#">Link 2.2 - active</a></li>
        <li><a href="#">Link 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Separated link</a>
    </li>
    <li><a href="#">Separated link</a>
      <ul>
        <li><a href="#">Link 2.1</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
            <li><a href="#">Link 3.3</a>
              <ul>
                <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
                <li><a href="#">Link 4.2</a></li>
                <li><a href="#">Link 4.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">One more very, very, very, long separated link</a></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</div>