不同分辨率的div中按钮之间的自动边距的CSS

Question

我在div中有3个按钮，同时检查其响应的不同分辨率，但在某些屏幕上，最后一个按钮位于前两个按钮下，没有任何边距。

有没有办法在不使用媒体查询的情况下提供此保证金。

Answer 1

您只需在按钮上使用margin-bottom即可。确保按钮为display: inline-block;：

.btn {display: inline-block; margin: 0 0 10px; width: 200px; text-align: center; border-radius: 10px; padding: 5px; border: 0;}
.one {background: #99f;}
.two {background: #9f9;}

<button class="btn one">One</button>
<button class="btn one">Two</button>
<button class="btn two">Three</button>

预览

您可以将margin-bottom调整为按钮之间的空格。

Answer 2

使用bootstrap＆amp;你不必担心它！

示例代码段：

＆＃13;

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



<div class="row text-center">
  <button type="button" class="btn btn-lg col-md-3 col-md-offset-1">Button One</button>
  <button type="button" class="btn btn-lg col-md-2 col-md-offset-1">Button Two</button>
  <button type="button" class="btn btn-lg col-md-3 col-md-offset-1">Button Three</button>
</div>

＆＃13;

＆＃13;

＆＃13;