水平行中按钮的垂直偏移

Question

问题描述： 尽管按钮元素的上边距相等，但它们之间存在垂直偏移。

如果更改 margin-top: 属性，则整行按钮都会移动，而不是一个元素。

我已经尝试过：

• 不同的显示属性 (

  display: inline;

  &

  display: inline-block;

  )

• position: relative;

我想到的下一个解决方案：

将属性

position:absolute;

分配给按钮，然后分别为每个元素定义边距。
但这不是一个优雅的解决方案（如果你有想法，我会寻找一个）。

描述问题的图片：

.VPcalc {
  width: 550px;
  height: 50px;
  border: 2px solid blue;
  margin-top: -5px;
  background-color: lightgrey;
}

div input {
  width: 50px;
  border: 2px solid grey;
}

button#btnR1 {
  display: inline-block;
  background-color: darkblue;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}

button#btnR2 {
  display: inline-block;
  background-color: darkred;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}

button#btnR1:hover,
button#btnR2:hover {
  background-color: white;
  color: black;
}

div input#tag {
  display: inline-block;
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}

div button#factor,
div button#calculation {
  display: inline-block;
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 50px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}

span#f1,
span#t1 {
  font-size: 12px;
}

<div class="VPcalc">
  <button id="btnR1" onClick="myFunction()">Neue Zahl</button>
  <button id="btnR2" onClick="auswerten()">Auswerten</button>

  <button id="factor"><span id="f1"></span></button>
  <button id="calculation"><span id="t1" ></span></button>
  <input type="number" id="tag"></input>
</div>

Answer 1

使用 Flexbox 更容易：

.VPcalc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 550px;
  height: 50px;
  border: 2px solid blue;
  margin-top: -5px;
  background-color: lightgrey;
}

div input {
  width: 50px;
  border: 2px solid grey;
}

button#btnR1{
  
  background-color: darkblue;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

button#btnR2{
  background-color: darkred;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

button#btnR1:hover, button#btnR2:hover{
  background-color: white;
  color: black;
}

div input#tag{
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

div button#factor, div button#calculation{
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 50px;
  height: 20px;
}

span#f1, span#t1{
  font-size: 12px;    
}

<div class="VPcalc"> 
  <button id="btnR1" onClick="myFunction()">Neue Zahl</button> 
  <button id="btnR2" onClick="auswerten()">Auswerten</button> 
  <button id="factor" ><span id="f1"></span></button>
  <button id="calculation"><span id="t1" ></span></button>
  <input type="number" id="tag" ></input>
</div>

有一些选项可以间隔这些按钮。我只是用间隙将它们居中，但您可能更喜欢类似

justify-content: space-between

等的东西，而不是间隙。