时间戳

首页 > 解决方案 > 需要让两个按钮在中心左右对齐几个像素

html - 需要让两个按钮在中心左右对齐几个像素

问题描述

需要让两个按钮在中心左右对齐几个像素我需要 div left 到中心左侧 1px。并有权成为它的 1 像素。

有什么想法吗？

.btn {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  color: black;
  border: 2px solid black;
  background-color: white;
  width: 100px;
  text-decoration: none;
}

.btn2 {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  color: white;
  border: 2px solid white;
  background-color: black;
  width: 100px;
  text-decoration: none;
}

.divleft {
  margin: auto 0;
  text-align: left;
}

.divright {
  margin: auto 0;
  text-align: right;
}
<div class="divleft"> <a href="en.wikipedia.org/wiki/Memento_mori" class="btn">Memento</a> </div>
<div class="divright"> <a href="discord.gg/j9Bh6mSjf2" class="btn2">Mori</a> </div>

标签： htmlcss

解决方案

使用弹性盒：

.box {
  display: flex;
  width: 100%;
}

.left,
.right {
  width: 100%;
}

.left {
  text-align: right;
  margin-right: 10px;
}

a {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  border: 2px solid black;
  width: 100px;
  text-decoration: none;
}

.btn {
  color: black;
  background-color: white;
}

.btn2 {
  color: white;
  background-color: black;
}
<div class="box">
  <div class="left">
    <a href="en.wikipedia.org/wiki/Memento_mori" class="btn">Memento</a>
  </div>

  <div class="right">
    <a href="discord.gg/j9Bh6mSjf2" class="btn2">Mori</a>
  </div>
</div>

代码笔： https ://codepen.io/manaskhandelwal1/pen/jOMgpbd

推荐阅读