如何删除导航栏中徽标之间的空格？

Question

我有一个菜单，里面有一些链接和徽标。你可以在下面看到。

我希望 03 徽标相互关闭。您可以看到徽标之间的空格。我不想在徽标之间留出太多空间。我怎样才能删除这些徽标之间的间隙/空间。帮帮我。

我的 HTML 代码：

  <header>
      <nav class="navbar navbar-expand-xl absolute-nav transparent-nav cp-nav navbar-light bg-light fluid-nav">
        <a class="navbar-brand" href="{% url 'home' %}">
          <img src="{% static 'images/logo-2.png'%}" class="img-fluid" alt="">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto main-nav">
            <li class="menu-item active"><a title="Home" href="{% url 'home' %}">Home</a></li>
            <li class="menu-item"><a  href="{% url 'jobs' %}">Jobs</a></li>
            <li class="menu-item"><a  href="javascript:void(0)">Career Advice</a></li>
            <li class="menu-item"><a  href="javascript:void(0)">Skill Check</a></li>
            <li class="menu-item"><a  href="javascript:void(0)">About Us</a></li>
            <li class="menu-item"><a href="#"><i> <img src="{% static 'images/social-icon/facebook.png'%}" style="height:20px;position: relative;padding: 0;" class="img-fluid" alt=""></i>  </a></li>
            <li class="menu-item"><a href="#"><i> <img src="{% static 'images/social-icon/linkedIn.png'%}" style="height:20px;position: relative;padding: 0;" class="img-fluid" alt=""></i>  </a></li>
            <li class="menu-item"><a href="#"><i> <img src="{% static 'images/social-icon/twitter.png'%}" style="height:20px;position: relative;padding: 0;" class="img-fluid" alt=""></i>  </a></li>
            <li class="menu-item login-popup" id="sign-in"><a href="{% url 'sign-in' %}">Login</a></li>
            <li class="menu-item login-popup" id="register"><a href="{% url 'register' %}">Registration</a></li>
            <li class="menu-item" id="sign-out"><a href="professional/sign-out/">Logout</a></li>
          </ul>
        </div>
      </nav>
    </header>

我的 CSS：

.cp-nav-2 .navbar-collapse .navbar-nav .menu-item {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin-right: 30px;
  color: #6f7484;
}

.cp-nav-2 .navbar-collapse .navbar-nav .menu-item a:hover {
  color: #246df8;
}

.cp-nav-2 .navbar-collapse .navbar-nav .menu-item.post-job {
  margin-left: auto;
  margin-right: 0;
}

.cp-nav-2 .navbar-collapse .navbar-nav .menu-item.post-job a {
  background: #246df8;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border-radius: 3px;
  padding: 11px 20px;
}

.cp-nav-2 .navbar-collapse .navbar-nav .menu-item.post-job a i {
  font-size: 1.2rem;
  margin-right: 10px;
}

Answer 1

忠于先前。您可以使用内联 CSS，例如

style="height:20px;position: relative;padding: 0;" 

或者你添加一个 CSS 类。

就内联或脚本化的 CSS 而言，一个简单的解决方法是调整从一项到下一项的位置，如下所示：

position:relative;right:-6px; 

您必须根据需要调整像素。

希望对你有帮助

Answer 2

你的 CSS 到处都是，我会从你的 HTML 中删除所有的类并删除你所有的 CSS 并重新开始，如果你不这样做，让你开始

* {
  padding: 0;
  margin: 0;
}
ul {
  display: flex;
  text-decoration: none;
  width: 100%;
  background-color: lightgrey;
  justify-content: flex-end;
}
li {
  flex-direction: row;
  list-style: none;
  padding: 1rem;
}
a {
  text-decoration: none;
  color: #333;
}

在你的css中添加一个类class="img-fluid"，然后你可以从那里更改属性，你不需要在你的HTML中做style="height:20px;position: relative;padding: 0;"，因为它会开始变得非常混乱，只需在你的css中做你的 style.css 文件