导航栏上的 CSS 对齐问题

Posted

技术标签:

【中文标题】导航栏上的 CSS 对齐问题【英文标题】：CSS Alignment Issue on Navigation Bar 【发布时间】：2020-02-17 15:32:07 【问题描述】：

我目前正在创建一个导航栏，无论鼠标是在导航栏上还是在导航栏外，它都会展开和折叠。我的问题是，当导航栏展开时，我的图标与中心对齐，但我希望它们在导航栏展开之前准确定位在它们所在的位置。我让它们与中心对齐，因为当导航栏折叠时，图标的大小不同并且没有它看起来“不合适”。 

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() 
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
;
sidenav.onmouseout = function() 
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
;
#sidenav 
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;


#sidenav-brand 
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


#sidenav-heading h2 
  margin: 0;


#sidenav-expand 
  text-align: center;
  margin-left: 3px;


.expand 
  transform: rotate(180deg);


#sidenav-links 
  margin: 15px 0;


#links 
  list-style-type: none;
  padding: 0;
  text-align: center;


#links li 
  padding: 18px;
  display: block;


#links li:hover 
  color: white;
  background-color: hotpink;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

和 JSFiddle 链接： https://jsfiddle.net/h86zf4d3/

从注释掉的 JS 代码中可以看出，我尝试将图标浮动到左侧，但是，由于某种原因，这消除了列表项的块显示。

【问题讨论】：

请不要使用这样的javascript代码来触发鼠标悬停的视觉效果。只需使用css 的:hover 选择器 【参考方案1】：

要使其正常工作，请更改 #linkstext-align:left 你关于图标大小的问题放在了 fa-fw 类中。它将使所有图标大小相同。

Check the snippest below:


let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() 
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
;
sidenav.onmouseout = function() 
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
;
#sidenav 
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;


#sidenav-brand 
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


#sidenav-heading h2 
  margin: 0;


#sidenav-expand 
  text-align: center;
  margin-left: 3px;


.expand 
  transform: rotate(180deg);


#sidenav-links 
  margin: 15px 0;


#links 
  list-style-type: none;
  padding: 0;
  text-align: left;


#links li 
  padding: 18px;
  display: block;


#links li:hover 
  color: white;
  background-color: hotpink;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Navigation Bar</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
  </head>

  <body>
    <div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading" style="display:none;">
          <h2>Expanded</h2>
        </div>
        <div id="sidenav-expand">
          <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
        </div>
      </div>

      <div id="sidenav-links">
        <ul id="links">
          <li>
            <i class="fas fa-fw fa-id-card fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-briefcase fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

【讨论】：

【参考方案2】：

为什么不把它们放在左边？

#links li
  text-align:left;

【讨论】：

这将删除折叠导航栏中图标的中心位置。我希望图标以折叠为中心，但在展开时保持原位 在你的 jsfiddle 中，当我改变位置时没有任何变化。无论如何，您可以在鼠标悬停时应用该样式，以便 li 元素向左对齐！【参考方案3】：

我已经简单地将float: left 添加到#links 的CSS 中，它看起来不错。

它们在折叠版本上仍然居中对齐，因为我没有删除它正上方的 text-align: center; 行。但是，当菜单打开时，它们不再改变位置。

参见下面的 sn-p：

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() 
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
;
sidenav.onmouseout = function() 
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
;
#sidenav 
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;


#sidenav-brand 
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


#sidenav-heading h2 
  margin: 0;


#sidenav-expand 
  text-align: center;
  margin-left: 3px;


.expand 
  transform: rotate(180deg);


#sidenav-links 
  margin: 15px 0;


#links 
  list-style-type: none;
  padding: 0;
  text-align: center;
  float: left;


#links li 
  padding: 18px;
  display: block;


#links li:hover 
  color: white;
  background-color: hotpink;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

【讨论】：

定位没问题，但是这消除了每个列表项的块显示，稍后链接将需要它。【参考方案4】：

只需删除 #links 元素上的 text-align: center 规则即可。我还编辑了您的 CSS 以添加一些 :hover 规则以避免使用 javascript：

#sidenav 
  height: 100%;
  min-width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;


#sidenav:hover 
  width: 280px;


#sidenav:hover #expand-icon 
  transform: rotate(180deg);


#sidenav:hover #sidenav-heading 
  display: inline-block;


#sidenav #sidenav-heading 
  display: none;


#sidenav-brand 
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


#sidenav-heading h2 
  margin: 0;


#sidenav-expand 
  text-align: center;
  margin-left: 3px;


#sidenav-links 
  margin: 15px 0;


#links 
  list-style-type: none;
  padding: 0;


#links li 
  padding: 18px 20px;
  /* <-- Add some padding*/
  display: block;


#links li:hover 
  color: white;
  background-color: hotpink;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

【讨论】：

我知道这一点，但这样做时，折叠导航栏上的图标不再位于中心，对我来说看起来也不“正确”。我知道这是一个小问题，但我希望它在导航栏折叠时居中，并且图标在展开时保持在原位。 @JLi_2398 将text-align: center 保留在那里但只在其下方添加float: left 怎么样？请参阅我的答案以进行演示。 @JLi_2398 我使用一些填充更新了我的答案并删除了 javascript 部分；)

以上是关于导航栏上的 CSS 对齐问题的主要内容，如果未能解决你的问题，请参考以下文章

float浮动在制作导航栏上的巧用

在 CSS/HTML 中为导航栏上的按钮添加图像

如何使用 Tailwind CSS 仅在小型设备上将导航栏上的项目居中

导航栏上的菜单项和导航栏左侧的公司图标

无法同时在我的标题和导航栏上使用 justify-content 和 align-items

使用CSS在导航栏上滑动（动画）bg图像位置