【问题标题】:Bottom border underline the text only底部边框仅在文本下划线
【发布时间】:2014-07-29 04:38:25
【问题描述】:

您好,我希望边框底部下划线看起来像这样,

所以基本上只会给文字加下划线,

我在我的网站 (Test set up here) 上注意到它会像下面这样扩展整个宽度,

我注意到我需要减少蓝色,宽度/高度,虽然我没有设法实现这一点并保持导航栏合理,

我确实尝试删除导航对齐,并使用 text-align: center,但它不会居中。

问题:如何让导航栏居中,同时让边框底部仅扩展到文本的长度。

谢谢。

【问题讨论】:

  • 也许将a 文本进一步包裹在一个跨度内并让边框适用于跨度?
  • 有什么阻止你使用text-decoration: underline;

标签: html css twitter-bootstrap-3


【解决方案1】:

只需使用 span 将文本包裹在 <a></a> 标签内,并将边框应用到 <span> 而不是 <a>。所以你会得到这样的东西:

<a class="menu" href="link"><span>Shop</span></a>

然后在 css 中是这样的:

a.menu:hover span {
  border-bottom: 2px solid black;
}

【讨论】:

    【解决方案2】:

    改变这个:

    .nav > li > a {
         display: block;
    }
    

    到这里:

    .nav > li > a {
         display: inline-block;
    }
    

    这将有助于在将锚定为inline-block 后将它们居中,可能还有其他连锁效应:

    .navbar-nav.nav-justified > li{
       text-align:center;
    }
    

    【讨论】:

    • 那么按钮没有对齐
    • 是的,他们不是,但这是一个很好的第一步,我也许可以从这里开始工作。谢谢
    • @jackdh 你对你的文本应用了一些对齐,但可能会有其他效果由此体现。祝你好运!
    猜你喜欢
    • 2014-11-08
    • 2022-11-21
    • 2012-03-15
    • 2013-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多