html - 内联 block 表单元素在应用填充时换行并且之间存在空格

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

我相信您遇到的问题(如果我理解正确的话)是 display:inline-block;当 HTML 位于两个单独的行时添加一个 lil spacer - 您可以通过 float 元素来解决这个问题？

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>