内联块内的显示块

divHelper11 发表于 Dev

divHelper11

我有两张图片，一张在左边，第二张在右边。当我尝试在两个按钮之间的中间添加两个按钮时，右图转到底部，而左转到顶部，我无法解决此问题。有人可以建议我吗？元素不是很大，它们可以轻松地排成一行。按钮应该一个接一个。有人可以建议我吗？

的HTML

<img src="/boh/boh/public/img/angel wing.jpg" class="wings" id="leftWing">
<button class="buttons">Login</button>
<button class="buttons">Register</button>
<img src="/boh/boh/public/img/devil wing.jpg" class="wings" id="rightWing">

的CSS

#leftWing {
  margin-right: -4vw;
  display: inline-block;
}
#rightWing {
  margin-left: -4vw;
  display: inline-block;
}
.buttons {
  margin: 1.2vh 0;
  height: 2.4vh;
  width: 4.5vw;
  text-align: center;
  display: block;
}

乔什·克罗齐耶（Josh Crozier）

您可以包装两个button元素，然后将父包装元素设置display为inline-block：

.button-wrapper,
.wings {
  display: inline-block;
}
.buttons {
  display: block;
  margin: 0.4em auto;
}

<img src="//placehold.it/200" class="wings" id="leftWing" />
<div class="button-wrapper">
  <button class="buttons">Login</button>
  <button class="buttons">Register</button>
</div>
<img src="//placehold.it/200" class="wings" id="rightWing" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。