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

在任何事情之前，html和css

.HTML：

<!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>

.CSS：

#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;
}

因此，如您所见，导航栏使用内联无序列表，因此要在锚文本之间放置一个空格，我在锚文本的两侧使用了两个nbsp实体，但是当悬停状态处于活动状态并且应用下划线时，它也为nbsp下划线国家生物多样性战略方案下划线

任何帮助将不胜感激，谢谢

您可以删除 ，并在<a>标签上替换为 CSSpadding：

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

#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;
padding: 0 .5em; /* Padding can replace spaces*/
}
#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;
}

<!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">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>

删除"nbsp"并添加边距，请参阅以下示例

#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;
}
/*MARGIN ADDED HERE*/
.cf li {
margin-left: 3px;
margin-right: 3px;
}

<!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">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>

相关内容

最新更新

热门标签：