Question

我在活动时将导航栏链接设置为下划线，但我希望文本和下划线之间有一些边距。我怎么能用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>

Answer 1

你不能，而不是rbind()。

您需要修改标记并添加可以应用边框的元素：

<强> HTML

# building function
extract_data <- function(chapter_frame){
  words <- 
    xml_find_all(chapter_frame, ".//d1:p", xml_ns(melville))  %>% 
    xml_text() %>% 
    unlist() %>% 
    str_split("\\W+") %>% 
    unlist()  %>% 
    tolower()
  n   <- xml_attr(chapter_frame, "n")
  pos <- seq_along(words)
  data_frame(words, chapter=n, paragraph=pos)
}

# using function
chapter_words <- 
  lapply(chap_frames, extract_data) 

# `rbind()`ing data
chapter_words <- do.call(rbind, chapter_words)

chapter_words
## Source: local data frame [216,669 x 3]
## 
##      words chapter  paragraph
## 1     call       1          1
## 2       me       1          2
## 3  ishmael       1          3
## 4     some       1          4
## 5    years       1          5        
## 6      ago       1          6
## 7    never       1          7
## 8     mind       1          8
## 9      how       1          9
## 10    long       1         10 
## ..     ...     ...        ...

<强> CSS

text-decoration

Bootply

Answer 2

乔治的方式会起作用。另一种方式如下：

与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/

Answer 3

你可以做到这一点。使用border-bottom和padding-bottom

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

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

3 个答案: