时间戳

首页 > 解决方案 > 我必须申请什么CSS来摆脱这个无用的间距？

html - 我必须申请什么CSS来摆脱这个无用的间距？

问题描述

我有一个导航栏，其中包含一些项目，其中 4 个在左侧，一个必须始终在右侧。问题是当我把最后一个词介绍到左边时，他们把一个词放在另一个词上，看起来很糟糕。还有一件事是，当我改变显示器的分辨率时，总是在右边的项目向左移动，几乎触及中间。

一些额外的信息是，这是一个由大学网络平台组成的项目的一部分。它主要使用 SpringBoot 及其库创建，完全用 Java 编写在后端。尽管如此，前端主要是 HTML，当我需要使它看起来不难看时，一些 CSS 和 Javascript 以防动画效果。更不用说 Thymeleaf 框架，这样我就可以与后端正确通信。

我尝试了很多东西，但我不知道如何让它们看起来不错。有人愿意在这件时髦的事情上帮助我吗？我将添加两张图片：

下面的代码来自页面：

#personal-page {
  padding-left: 780px;
  font-size: 20px;
}

#admin-page {
  padding-left: 730px;
  font-size: 20px;
}

#assistant-page {
  padding-left: 700px;
  font-size: 20px;
}
<html>

<head>

  <nav class="fixed-top navbar navbar-dark bg-dark navbar-expand">
    <a class="navbar-brand" href="https://curs.upb.ro/">
      <span class="fa fa-university"></span> E-Learning Platform
    </a>

    <button class="navbar-toggler" 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 mr-auto" id="navi">
        <li class="nav-item active">
          <a class="nav-link" href="/">Homepage<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="/menu">Menu Page</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="/admin/students">Students List</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="/admin/camine">Camine Page</a>
        </li>

        <div th:switch="${isDevAcc}">
          <li th:case="'true'" class="nav-item">
            <div th:switch="${loggedUsername}">
              <a th:case="'iancu'" id="admin-page" class="nav-link fas fa-code" aria-current="page" href="/admin/devAdminPage">
                <span> Dev Account :: ADMIN </span>
              </a>
              <a th:case="'lixi'" id="assistant-page" class="nav-link fas fa-code" aria-current="page" href="/admin/devAdminPage">
                <span> Dev Account :: ASISTENT </span>
              </a>
            </div>
          </li>

          <li th:case="'false'" class="nav-item" id="personal-page">
            <a class="nav-link fas fa-user-secret" aria-current="page" href="#" th:text="${loggedUsername}"></a>
          </li>
        </div>
      </ul>
    </div>
  </nav>

</head>

<body>

</body>

</html>

标签： htmlcssspring-bootthymeleaf

解决方案

用于flexbox水平对齐导航栏：nav ul { display: flex; }

然后你也可以使用:last-child选择器来应用margin-left: auto;，它将最后一项推到右边：nav ul li:last-child { margin-left: auto; }。margin: auto;在 a 内flex-container将消耗所有剩余空间。

nav ul {  
  display: flex;
}

nav ul li:last-child {
  margin-left: auto;
}


/* For styling purpose only */

nav ul {
  list-style: none;
  padding: 5px;
}

nav li {
  margin: 0 10px;
}
<nav>
  <ul>
    <li>E-Learning Plattform</li>
    <li>Homepage</li>
    <li>Menu Page</li>
    <li>Students List</li>
    <li>Camine Page</li>
    <li>Admin</li>
  </ul>
</nav>

推荐阅读