时间戳

首页 > 解决方案 > 如何对齐 html 中的所有项目

右边的元素？

html - 如何对齐 html 中的所有项目
右边的元素？

问题描述

在此处输入图像描述 我在那里有这个 div，我将其用作菜单栏。我想将其中的所有项目都对齐到右侧，但我无法做到这一点。这是它的代码：

$(document).ready(function() {
  $(window).scroll(function() {
      if ($(document).scrollTop() > 20) {
          $("#menubar").css('background', 'rgba(62, 63, 64, 0.88)');
          $("#menubar a").css('color', 'white');

      } else {
          $("#menubar").css('background', '');
          $("#menubar a").css('color', '');
      }
  });
});
#menubar a {
  padding-top: 2vh;
  padding-bottom: 2vh;
  text-decoration: none;
  color: #1A1A1A;
  font-size: 2.5vh;
  font-family: "Input Mono";
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

#menubar {
  right: 0%;
  position: fixed;
  top: 0;
  z-index: 999999;
  overflow: hidden;
  width: 100%;
}
<div id="menubar">
    <a href="./index.html">Home</a>
    <a href="href">About</a>
    <a href="./index.html">Features</a>
    <a href="./index.html">Download</a>
    <a href="href">Github</a>
</div>

非常感谢您的帮助！

标签： htmlcss

解决方案

像这样 ？：

$(document).ready(function() {
  $(window).scroll(function() {
      if ($(document).scrollTop() > 20) {
          $("#menubar").css('background', 'rgba(62, 63, 64, 0.88)');
          $("#menubar a").css('color', 'white');

      } else {
          $("#menubar").css('background', '');
          $("#menubar a").css('color', '');
      }
  });
});
#menubar a {
  padding-top: 2vh;
  padding-bottom: 2vh;
  text-decoration: none;
  color: #1A1A1A;
  font-size: 2.5vh;
  font-family: "Input Mono";
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

#menubar {
  right: 0%;
  position: fixed;
  top: 0;
  z-index: 999999;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>
<div id="menubar">
  <a href="./index.html">Home</a>
  <a href="link">About</a>
  <a href="./index.html">Features</a>
  <a href="./index.html">Download</a>
  <a href="link">Github</a>
</div>

推荐阅读