时间戳

首页 > 解决方案 > 如何使链接之间的空间在 html 中不可选择？

html - 如何使链接之间的空间在 html 中不可选择？

问题描述

我想制作一个导航栏，在我的链接之间我有一个可选择的空间。我怎样才能使它不可选择？

这是代码：

.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 中不可选择？

标签： htmlcss

解决方案

执行此操作的更简单方法如下。

将您拥有的所有链接放在divorheader标记中并显示元素flex，以便divorheader标记内的所有内容都位于一行中。我也使用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>

推荐阅读