导航栏上的CSS对齐问题

时间：2020-02-17 15:32:07

标签： javascript html css

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

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代码中看到的那样，我试图将图标浮动到左侧，但是由于某些原因，这摆脱了列表项的块显示。

4 个答案:

答案 0 :(得分：0)

只需删除text-align: center元素上的#links规则。我还编辑了您的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>

答案 1 :(得分：0)

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

#links li{
  text-align:left;
}

答案 2 :(得分：0)

要使其生效，请更改#links{text-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>

答案 3 :(得分：0)

我已经为float: left在CSS中添加了#links，对我来说很好。

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

请参见下面的代码段

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>

相关问题
最新问题