Question

我在li标记中有一个固定宽度span和可变长度内容的导航。大多数链接内容都是一行，有些是多行的。

问题是我希望多行和单行内容都有一个下划线，只有实际内容的宽度，而不是整个div 。

Here's a jsfiddle showing the issue。第二个和第三个多行元素应该具有紫色下划线，仅跨越内容的宽度。在它的最终形式中，紫色边框也应该拥抱容器的底部。

HTML

<ul>
  <li>
    <span>one line</span>
  </li><li>
    <span>holy guacamole three lines</span>
  </li>
</ul>

CSS

ul {
  table-layout: fixed
  text-align: center;

}

li {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 60px;
  text-align: center;

  list-style: none;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

span {
  display: inline-block;
  border-bottom: 2px solid violet;
}

我担心唯一的解决方案是硬编码宽度或下划线长度，我真的想避免，因为有很多链接。谢谢！

Answer 1

您绝对可以将span置于li

之内

＆＃13;

ul {
  table-layout: fixed;
  text-align: center;
}

li {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 60px;
  text-align: center;
  list-style: none;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  position: relative;
}

span {
  display: inline-block;
  border-bottom: 2px solid violet;
}

.abs span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<ul>
  <li>
    <span>one line</span>
  </li>
  <li class="abs">
    <span>holy guacamole more lines</span>
  </li>
</ul>

＆＃13;

多线内联块下划线的通用CSS解决方案

HTML

CSS

1 个答案: