php - 按钮网格间距

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 这样的 CSS 框架。或 UIKit他们的 Gridsystems 会很适合你。