0

需要让两个按钮在中心左右对齐几个像素我需要 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>

4

2 回答 2

1

使用弹性盒：

.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

于 2021-01-27T03:14:40.413 回答
0

我创建了一个 CodePen 来展示如何使它工作：https ://codepen.io/kaireidcasey/pen/rNMXrde

父元素需要 display: flex 设置就可以了。每个孩子都需要在一侧设置自动边距。我相信还有其他方法可以解决这个问题。

代码片段：

HTML：

<div class="container">
  <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>
</div>

CSS：

.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-right: 1px;
  margin-left: auto;
}

.divright {
  margin-left: 1px;
  margin-right: auto;
}

.container {
  display: flex;
}
于 2021-01-27T03:35:39.807 回答