Question

我有一个结构如下的列表：

<ul>
  <li>
    <a href="#">Link</a>
  </li>
</ul>

我希望每个列表项的高度都为50px，因此我将<a>的行高设置为50px，并且工作正常。

但是，现在我正在尝试为每个<a>标记添加一个子行，以便它看起来像这样：

<ul>
  <li>
    <a href="#">
      Link
      <span class="sub-line">Link Info</span>
    </a>
  </li>
</ul>

子行将是一个较小的字体，并会在链接文本下舒适地显示。我一直在搞乱显示器和线高以及绝对定位，但我没有运气想出一个干净的解决方案。非常感谢帮助！

Answer 1

你的意思是这样的吗？

a {
    position: relative;
}

a span {
    position: absolute;
    font-size: 0.5em;
    bottom: -1em;
    left: 0;
    width: 100%;
}

JSFiddle

Answer 2

这是我从你的问题中理解的：

<强> Fiddle

<强> HTML：

<a href="#">
    Link
    <sub>Link Info</sub>
</a>

<强> CSS：

a     { text-decoration: none; }
a sub { font-size: 8px; }
li    { text-align: center; }

Answer 3

您可以使用display: block将子行放在链接文本下方，使用较小的字体

.sub-line {
    display: block;
    font-size: 80%;
}

缩短距离

    line-height: 50%;

并水平居中

li {
    text-align: center;
}

请参阅JSFiddle

Answer 4

DEMO

试试这个：

li {
  display: inline-block;
}
a {
  line-height: 50px;
  display: block;
}
span {
  display: block;
  line-height: 1px;
  font-size: 75%;
  //Here you can play with negative margin-top for better positioning 
}

如何将列表项中的文本和子行中心化？

4 个答案: