Question

我的问题是，对于div类form-profile和form-profile-side，如果我想要其中2个div，它们必须位于HTML中的同一行：

<div class="span13">
  <form class="form-profile-side"></form><form class="form-profile"></form>
</div>

如果我将第二个类放在一个新行上，它会弄乱布局（这就是我想要做的）：

<div class="span13">
  <form class="form-profile-side"></form>
  <form class="form-profile"></form>
</div>

CSS：

.form-profile-side {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-right: 0;
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.form-profile {
  display: inline-block;
  width: 817px;
  padding: 15px 15px 15px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

如何制作它以便我可以使用该类在HTML中创建新行，而不是将其全部放在一行？

JSFiddle：http://jsfiddle.net/VzTxM/4/

Answer 1

我相信你所拥有的问题（如果我理解正确的问题）是显示：inline-block;当HTML在两个单独的行上时添加一个lil spacer - 你可以通过改变元素来解决这个问题吗？

CSS

.form-profile-side,.form-profile {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #d6d6d6;
    background-color: #fff;
    float:left;
}
.form-profile-side {
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  vertical-align: top;
  border-right: 0;
  width: 120px;
}
.form-profile {
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  padding: 15px 15px 15px;
  width: 817px;
}

.clear {
    clear:both;
}

<强> HTML

<div class="span13">
  <form class="form-profile-side"><br><br></form>
  <form class="form-profile"><br><br></form>
  <div class="clear"></div>
</div>

当应用填充并且之间存在空格时，内联块表单元素会换行

1 个答案: