内联表单布局已损坏

Question

我正在尝试创建一个内联表单，其中标签位于输入顶部，就像在bootstrap表单中一样。我尝试了各种选项，虽然我已经在输入的顶部设置了标签，但在前2个输入后布局中断。

我已经完成了截图，并且会感谢有人可以检查我的代码并指出我的错误。非常感谢

BTW ：

  

我使用的表单组不要与引导程序混淆   形式的基团。

.form-group {
  display: inline-block;
  margin-bottom: 0 !important;
  margin-top: 10px !important;
  width: 45%;
  padding: 5px 5px;
}

.form-area {
  background-color: #161616;
  padding: 10px 40px 20px;
  margin: 10px 0px 50px;
  border: 1px solid #111;
}

.form-control {
  background: -moz-linear-gradient(90deg, rgba(64, 64, 64, 1) 0%, rgba(33, 33, 33, 1) 100%) repeat scroll 0 0 padding-box !important;
  border-radius: 5px;
  box-shadow: 0 0 2px #4b4b4b inset, 0 1px 1px rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  font-size: 0.875rem;
  line-height: 1.43;
  min-height: 2.8em !important;
  padding: 0.5em 1.07em;
  border: none;
  color: #999 !important;
}

#editForm {
  display: inline;
}

.labelStyle {
  display: block;
  color: black;
  margin-left: 5px;
  font-size: 14px;
}

.svcBorder {
  border: 1px solid #2d2d2d;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 5px;
  margin-top: 30px;
}

input[type="text"] {
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 5px;
  margin-top: 5px;
  padding: 4px 8px 0;
  font-size: 14px;
  color: dimgrey;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
}

<form id="editForm" name="editForm" style="display: none;">
  <div id="message">
    <div class="text"></div>
  </div>
  <div class="form-group">
    <label class="labelStyle" for="id">id</label>
    <input id="id" name="id" readonly type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="service">Service</label>
    <input id="service" name="service" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="activity">Activity</label>
    <input id="activity" name="activity" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="dept">Department</label>
    <input id="dept" name="dept" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="company">Company</label>
    <input id="company" name="company" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="user">User</label>
    <input id="user" name="user" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="item">Item</label>
    <input id="item" name="item" type="text" value="">
  </div>
  <div class="form-group">
    <label class="labelStyle" for="date">Date</label>
    <input id="date" name="date" type="text" value="">
  </div>
</form>

Answer 1

根据你的截图，这似乎只影响你表单中的第一个字段 - 所以它前面的元素，

<div id="message"><div class="text"></div></div>

可能与此有关...

我们在您的代码段中没有看到任何样式，但如果它有边距/填充/边框或类似的设置，它可能仍会影响以下元素的位置，即使它当前是“空的” “（如同，没有文字内容。）