按钮网格间距

Question

我在按钮排列方面遇到一些问题，我有几个按钮形成一个网格。

我遇到的问题是，只要按钮内有多行文字就会向下移动。

我想你看到了问题所在。

<button class="boxed" dummy="0" name="x" type="submit" value="x">
  SEGEBERGER ZTG.DO
</button>

相应的CSS

button {
  background:#fff;
  border: 1px solid #c1c1c1;
  padding-left:11px;
  padding-right:11px;
  height:29px;
  margin-top: 5px;
  white-space: normal;
}

.boxed {
  margin-left:1px;
  padding-top:10px;
  padding-left:10px;
  width:100%;
  max-width:150px;
  height:150px;
  font-size: 10pt;
  word-break: break-all;
}

我环顾四周但没有发现任何修复它的东西。

https://jsfiddle.net/k1vvsx2h/

希望有人提示如何解决这个问题。

有一个好的：）

Answer 1

添加float:left将解决此问题。

.boxed {
    float: left;
    margin-left: 1px;
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    max-width: 150px;
    height: 150px;
    margin-right: 5px;
    font-size: 10pt;
    word-break: break-all;
}

button {
    background: #fff;
    border: 1px solid #c1c1c1;
    padding-left: 11px;
    padding-right: 11px;
    height: 29px;
    margin-top: 5px;
    white-space: normal;
}

这里还有一个jsFiddle给你：https://jsfiddle.net/hb8ydyba/1/。确保您使用clearfix此解决方案。

如果您正在寻找更灵活的解决方案，那么像Bootstrap或UIKit这样的CSS框架及其Gridsystems将为您提供良好的解决方案。