Question

我有一个问题，我正在尝试将1 px添加到带下划线的文本中，但我在网上进行了大量研究，发现唯一的方法是添加边框和填充底部

但宽度比单词长，我希望效果与下划线效果相同，用单词宽度裁剪。

这是我的小提琴

我尝试选择下划线

/* Underline Issue */
.selected {
    border-bottom: 1px solid #000;
    /* text-decoration: underline; */
    padding-bottom: 1px;
}

Answer 1

我认为span就是你要找的东西：

＆＃13;

.horizontal-tabs li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
  padding-left: 10px;
}
.horizontal1,
.horizontal2 {
  border-left: 1px solid #000;
}
/* Underline Issue */

.selected span {
  text-decoration: underline;
}

＆＃13;

<div class="tabs">
  <ul class="horizontal-tabs">
    <li class="horizontal0">Description</li>
    <li class="horizontal1">Product Care</li>
    <li class="horizontal2 selected"><span>Shipping Information</span>
    </li>
  </ul>
</div>

＆＃13;

如果您实际上希望将下划线与文本保持距离，那么之前的技术仍然有效如果您使用前面提到的span。

＆＃13;

.horizontal-tabs li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
  padding-left: 10px;
}
.horizontal1,
.horizontal2 {
  border-left: 1px solid #000;
}
/* Underline Issue */

.selected span {
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}

＆＃13;

<div class="tabs">
  <ul class="horizontal-tabs">
    <li class="horizontal0">Description</li>
    <li class="horizontal1">Product Care</li>
    <li class="horizontal2 selected"><span>Shipping Information</span>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

如果在li元素中添加span，则可以使用span元素上的边框样式。我编辑了您的小提琴代码并删除了一些用于设置border-left样式的不必要的类。

<强> HTML

<div class="tabs">
    <ul class="horizontal-tabs">
         <li><span>Description</span></li>
         <li><span>Product Care</span></li>
         <li class="selected"><span>Shipping Information</span></li>
     </ul>
</div>

<强> CSS

.horizontal-tabs li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 1px solid #000;
}
/* This removes the first border */
.horizontal-tabs li:first-child {
    border-left: none;
}

/* Underline Issue */
.horizontal-tabs li.selected span {
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    display: inline-block;
}

JSFiddle

Answer 3

以下是答案 - https://jsfiddle.net/0orb5h4s/6/

刚刚添加

.selected span {
  border-bottom: 1px solid #000;
}

和

<li class="horizontal2 selected"><span>Shipping Information</span></li>

并从所选的li中删除了底部边框。

边框也适用于填充，这就是为什么添加跨度会将边框移动到填充内的内容。

Answer 4

为什么不添加跨度？

HTML

<div class="tabs">
    <ul class="horizontal-tabs">
        <li class="horizontal0">Description</li>
        <li class="horizontal1">Product Care</li>
        <li class="horizontal2 selected">
            <span>Shipping Information</span>
        </li>
    </ul>
</div>

CSS

.selected span {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

您可以在此处查看我的解决方案：https://jsfiddle.net/lordfox/0orb5h4s/4/

希望有所帮助！：）

底部边框与css上的文本值具有相同的宽度

4 个答案: