Question

我有这个垂直菜单。我正在使用伪元素来停止子弹。如果菜单项文本很长，它会分成两行，这很好，除了第二行没有缩进以便它与第一行对齐。我该如何解决这个问题？

HTML：

<div class="leftmenu">
  <ul class="sidebar-items">
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Indent second line indent second line indent second line</a></li>
    <li><a href="#">Menu item</a></li>
  </ul>
</div>

的CSS：

ul {
  list-style: none;
  display: table;
}

ul li {
  display: block;
}

ul li a:before {
  content: "*";
  float: left;
  line-height: 11px;
  margin: 5px 7px 0 0;
  display: table-cell;
}

JsFiddle here

提前致谢。

Answer 1

为li元素添加填充，并绝对定位伪元素。

.leftmenu {
  width: 300px;
}

ul {
  list-style: none;
  display: table;
}

ul li {
  display: block;
  position: relative;
  padding-left: 20px;
}

ul li a:before {
  position: absolute;
  left: 0;
  content: "*";
  line-height: 11px;
  margin: 5px 7px 0 0;
  display: table-cell;
}

<div class="leftmenu">
  <ul class="sidebar-items">
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Indent second line indent second line indent second line</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
  </ul>
</div>

Answer 2

您可以使用margin和text-indent的组合。将否定text-indent应用于列表项，将margin应用于pseudoelement。

jsfiddle

.leftmenu {
  width: 300px;
}

ul {
  list-style: none;
  display: table;
}

ul li {
  display: block;
  text-indent: -1em;
}

ul li a:before {
  content: "*";
  float: left;
  line-height: 11px;
  margin: 5px 7px 0 0;
  margin-right: 1em;
  display: table-cell;
}

<div class="leftmenu">
  <ul class="sidebar-items">
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Indent second line indent second line indent second line</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
  </ul>
</div>

Answer 3

您可以更改星号的左边距，并将其拉到字符长度的左侧。所以 ul li a：before 将如下所示：

ul li a:before {
  content: "*";
  float: left;
  line-height: 11px;
  margin: 5px 7px 0 -15px;
  display: table-cell;
}

现在，如果您将列表项从您想要的位置移开，您可以随时添加一些边距或在您的ul li中留下一些填充：

ul li {
  display: block;
  margin-left: 15px;
}

使用伪元素的CSS菜单项项目符号 - 缩进第二行文本

3 个答案: