Html 我需要在li标记之间留出空间，但当应用悬停状态的下划线时，它会延伸到空间所在的位置_Html_Css

Html 我需要在li标记之间留出空间，但当应用悬停状态的下划线时，它会延伸到空间所在的位置

html css

Html 我需要在li标记之间留出空间，但当应用悬停状态的下划线时，它会延伸到空间所在的位置,html,css,Html,Css,在这之前是html和css HTML: 正如你所看到的，导航栏使用了一个内联无序列表，在锚文本之间放置了一个空格。我在锚文本的任一侧使用了两个nbsp实体，但当悬停状态处于活动状态且应用下划线时，它也会在nbsp下加下划线任何帮助都将不胜感激。谢谢您删除“nbsp”并添加边距，参见下面的示例 #logotext{ 字体系列：“Doppio one”；字体大小：25px；左边距：20px；浮动：左；宽度：45%；位置：相对位置；顶部：25.5px； } .cf{ 明确：两者皆有

在这之前是html和css

HTML:

正如你所看到的，导航栏使用了一个内联无序列表，在锚文本之间放置了一个空格。我在锚文本的任一侧使用了两个nbsp实体，但当悬停状态处于活动状态且应用下划线时，它也会在nbsp下加下划线

任何帮助都将不胜感激。谢谢您删除“nbsp”并添加边距，参见下面的示例

#logotext{
字体系列：“Doppio one”；
字体大小：25px；
左边距：20px；
浮动：左；
宽度：45%；
位置：相对位置；
顶部：25.5px；
}
.cf{
明确：两者皆有；
}
#导航栏{
列表样式类型：无；
浮动：对；
}
#导航栏a{
文字装饰：无；
颜色：白色；
}
#导航栏a：悬停{
颜色：rgb（204153,0）；
文字装饰：下划线；
}
#李国宝{
显示：内联；
}
#钟{
字体系列：Rajdhani；
字体大小：30px；
位置：绝对位置；
}
/*此处添加了边距*/
.cf李{
左边距：3倍；
右边距：3倍；
}


JF网站|第1页
JF网络与复制；

您可以删除

，并在

<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JF Web | Page 1</title>
</head>

<header>
  <div id="titlebar">
    <div id="logotext">
      <h1>JF Web &copy;</h1>
    </div>
    <nav>
      <ul id="navbar" class="cf">
        <li><a href="Index.html" class="active">&nbsp;&nbsp;Page 1&nbsp;&nbsp;</a></li>
        <li><a href="">&nbsp;&nbsp;Page 2&nbsp;&nbsp;</a></li>
        <li><a href="">&nbsp;&nbsp;Page 3&nbsp;&nbsp;</a></li>
      </ul>
    </nav>
  </div>
</header>
<body onload="mainClock()">
<span id="clock"></span>


</body>
</html>

#logotext {
  font-family: 'Doppio one';
  font-size: 25px;
  margin-left: 20px;
  float: left;
  width: 45%;
  position: relative;
  top: 25.5px;
}

.cf {
  clear: both;
}

#navbar {
    list-style-type: none;
    float: right;

}

#navbar a {
  text-decoration: none;
  color: white;

}

#navbar a:hover {
  color: rgb(204, 153, 0);
  text-decoration: underline;

}

#navbar li {
  display: inline;
}

#clock {
  font-family: Rajdhani;
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 5px;
  margin-right: 10px;
}



#titlebar {
  width: 80%;
  margin: 0;
  padding: 0;
  background-color: #414a4c;
  overflow: hidden;
}

#navbar a {
  padding: 0 .5em;
}