时间戳

首页 > 解决方案 > 如何对齐这些 HREF 按钮？

html - 如何对齐这些 HREF 按钮？

问题描述

我正在尝试在 div 的右侧对齐 2 个按钮（它们是 HREF）。我尝试了很多东西，但我不确定如何。

CSS：

.href-right-header-buttons {
    position: unset;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    right: 0;
    top: 0;
    animation: animheader;
    animation-duration: 1.5s;

.div-header-gradient {
    display: flex;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
    flex-direction: row;
}

HTML：

    <div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>
        <a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
            Invite Bot
        </a>

        <a href="#" class="href-right-header-buttons">
            More Information
        </a>
    </div>

现在看起来如何： 目前

我希望它看起来如何： 在此处输入图像描述

所以基本上，我希望它将它们都移动到 div 的右侧并使它们分开。

标签： htmlcss

解决方案

寻找flex-grow并将其应用于p.

为了让它在您的 codePen CSS 中工作，我删除justify-content: space-between了 flex 容器上的 及其子元素.div-header-gradient的absolute定位。

关于链接上的“涟漪”效果，我用一个div（每个一个）包裹它们以“包含”动画。它们有一个附加的 CSS 规则，它影响了 JS 中的位置计算。注意.closest("div")哪些目标是包装器 div。

let x = e.pageX - e.target.closest("div").offsetLeft;
let y = e.pageY - e.target.closest("div").offsetTop;


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body {
  display: flex;
  flex-direction: column;
  background-color: #141414;
  position: center;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #121212;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.button {
  position: relative;
  padding: 12px 36px;
  margin: 10px 0;
  color: #738adb;
  font-size: 26px;
  letter-spacing: 2px;
  border-radius: 100px;
  background: #242424;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

.div-header-gradient {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  background: linear-gradient(#7700ff, #953bff);
  height: 100px;
  width: 100%;
  margin-left: 0px;
  overflow: hidden;
  animation: animheader;
  animation-duration: 1.5s;
  /*flex-direction: row;*/
}

.div-header-gradient p{
  flex-grow: 1;            /* Add this for the alignement */
}

.div-header-gradient>div{  /* Add this to contain the ripple effect on links */
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-content: center;
}

span {
  position: absolute;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.6s linear;
  z-index: 9999;
  overflow: hidden;
}

.text-header-title-white {
  color: #fff;
  font-size: 70px;
  font-family: Roboto, sans-serif;
  margin: 1px;
  /*position: absolute;*/
  vertical-align: central;
  overflow: hidden;
  margin-left: 0.5%;
  display: flex;
  flex-direction: row;
}

.href-right-header-buttons {
  /*position: absolute;*/
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 6px;
  padding-right: 6px;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  /*right: 0;
  top: 0;*/
  animation: animheader;
  animation-duration: 1.5s;
}

@keyframes animheader {
  from {
    margin-top: -100px;
    opacity: 0;
  }
  to {
    margin: 0px;
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.2;
  }
  100% {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}
<html>

<head>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="div-header-gradient" style="z-index: 1000;">
    <p class="text-header-title-white">
      Axxon
    </p>
    <div> <!-- a div to wrap each link -->
    <a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
      Invite Bot
    </a>
    </div>
    <div> <!-- a div to wrap each link -->
    <a href="#" class="href-right-header-buttons">
      More Information
    </a>
    </div>
  </div>

  <script type="text/javascript">
    const buttons = document.querySelectorAll('a');
    buttons.forEach(btn => {
      btn.addEventListener('mousedown', function(e) {
        let x = e.pageX - e.target.closest("div").offsetLeft;  // Changed 
        let y = e.pageY - e.target.closest("div").offsetTop;   // Changed
        let ripples = document.createElement('span');
        ripples.style.left = x + 'px';
        ripples.style.top = y + 'px';
        this.appendChild(ripples);
        setTimeout(() => {
          ripples.remove()
        }, 5000);
      })
    })
  </script>
  <script src="assets/js/particles.js"></script>
  <script src="assets/js/app.js"></script>
</body>

</html>

推荐阅读