如何增加导航栏链接上的文本和下划线之间的距离

debugcn 发表于 Dev

莫·阿兰特（Mo-Alanteh）

我在活动时将导航栏链接设置为下划线，但是我希望文本和下划线之间有一定的边距。如何在CSS中编码？

.nav .active a{
  text-decoration: underline;

}

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul class="nav navbar-default">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </nav>
           
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       
    </body>
</html>

戴维·威尔金森

乔治的方法行得通。另一种方法如下：

与George相同的HTML，除了删除<span>的：

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
</nav>

CSS：

.nav .active a{
  padding-bottom: 5px;
text-decoration: none;
border-bottom: 1px solid #337ab7;
}

.nav .active a:hover{
  border-bottom: 1px solid #23527c;
}

这是一个剥离的小提琴：http : //jsfiddle.net/samuidavid/thuLwrkf/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。