我想做一个导航栏和我的链接之间我有一个可选择的空间。我怎样才能使它不可选?
这是代码:
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navhome {
font-weight: 600;
color: rgba(255, 255, 255, 0.664);
}
.navlinks {
font-size: 15px;
}
.navlinks a {
font-weight: 570;
margin-top: -40px;
text-align: center;
padding: 15px 10px;
text-decoration: none;
float: right;
color: rgba(255, 255, 255, 0.863);
margin-left: -4px
}
.navlinks>.navlinks a:not(:last-child) {
margin-left: -10px;
}<nav class="navbar">
<a class="navhome" id="noselect">home</a>
<div class="navlinks">
<li><a href="#m">testlink</a></li>
</div>
<div class="navlinks">
<li><a href="#">testlink1</a></li>
</div>
</nav>如何使链接之间的空间在html中不可选择?
更简单的方法如下:
将所有链接放在div或header标签中，并显示元素flex，以便div或header标签中的所有内容都定位在一行中。我已经使用align-itemsCSS属性来垂直居中的链接。然后为每个链接声明一个左距或右距，这样它们就不会相互粘在一起。
请注意，我最初已将所有元素的默认边距和内边距设置为0px。
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
}
header {
display: flex;
align-items: center;
background-color: #0D0D0D;
padding: 10px;
}
.Header-Link {
font-family: "Poppins";
text-decoration: none;
color: #FFFFFF;
margin-right: 25px;
}<html>
<body>
<header>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Home</a>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Test Link 1</a>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Test Link 2</a>
</header>
</body>
</html>我做了一些改变CSS类和格式的代码和语法，排除不必要的CSS，使其正确的方式和链接之间的空格是不可选择的，简单地给。nav-item一个margin-right: 10px;
.navbar{
background-color: #303030;
}
.navbar-nav{
list-style: none;
display: inline-flex;
}
.nav-item{
margin-right: 10px;
}
.nav-item a{
text-decoration: none;
font-weight: normal;
text-align: center;
float: right;
color: #ffffffdc;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-item a.active{
font-weight: bold;
color: #daa520;
}<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" active>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">testlink</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">testlink1</a>
</li>
</ul>
</nav>