3

所以我有一个<ul>我需要风格的东西。我正在使用 + 来设置它的样式。它看起来像这样：

+ abc
+ 123
+ hello

我遇到的问题是我无法将 + 与实际li的 ' 对齐。就像，所以当我需要它们与li文本垂直对齐时，加号会稍微偏离。有人知道我在做什么错吗？

这是小提琴的链接。

CSS

ul {
    list-style: none;
    display: table-cell;
    padding: 0;
    margin: 0;
}

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

li:before {
    content: "+";
    padding-right: 5px;
    vertical-align: middle;
    display: inline;
    padding-top: 0;
    margin-bottom: .5em;

}

编辑

好吧，我不是说#content与其他对齐ul。我的意思是垂直居中+.abc

4

5 回答 5

5 
vertical-align: text-bottom;

http://jsfiddle.net/2FZx6/4/

您不希望+在 中间有li，但在与小写字母相同的高度上。这就是为什么你必须使用text-bottom而不是middle. 如果您要使用带有下划线的字母（例如gor y），您会注意到实际的点也不在元素/文本的中间，而是在text-bottomor上baseline。

（实际上，默认值baseline效果很好。）

资源

于 2013-08-09T19:40:20.450 回答
1

如果不使用Eric Meyers或Normalize.css等重置样式表，您的浏览器会自动添加默认样式。就我而言，chrome 为您的 UL 添加了 40px。

我明确地将填充设置为 20 像素，它看起来不错，但如果可以的话，我会实现一个重置样式表，以免以后头疼。

JsFiddle

ul {
    padding-left:20px;
    margin:0;
}
于 2013-08-09T19:34:01.830 回答
1

只在 li 上使用背景图像而不是使用“+”可能会更好 - 这样您可以根据需要定位“+”（作为背景图像）。

http://css.maxdesign.com.au/listutorial/master.htm

于 2013-08-09T19:41:52.550 回答
1

此方法为您提供了更多微调。

http://jsfiddle.net/2FZx6/9/

li:before { // add these bits
    position: relative;
    top: -.2em ; // fine tune this however you want
}
于 2013-08-10T00:09:20.903 回答
0

可能不适用于所有人，但对于我的情况，我通过将 lineheight 添加到li（文本）和li:before（字体真棒图标）进行相应调整：

li {
  /* li css */
  line-height: 16px;

li:before {
  /* li before css */
  line-height: 12px;
}

希望对其他人也有帮助！

于 2020-01-13T17:54:53.963 回答