CSS:让2个孩子DIV在同一条线上

Question

我在WP网站上使用Ninja Forms.有两个不同的字段(文本框和提交按钮)是单独的DIV,都是单个DIV的子项.

它们出现在连续的线上,我似乎无法在同一条线上出现.救命？

可以在网站上看到DIV的当前代码:http://theroadmap.co/generation/

<div id="ninja_forms_form_2_all_fields_wrap" class="ninja-forms-all-fields-wrap">
<div class="field-wrap text-wrap label-above ninjacomment-wrap" id="ninja_forms_field_9_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_9_type" value="text">
<label for="ninja_forms_field_9" id="ninja_forms_field_9_label" class=""> </label>
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9">
<div id="ninja_forms_field_9_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
<div class="field-wrap submit-wrap label-left ninjasubmit-wrap" id="ninja_forms_field_10_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_10_type" value="submit">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10">
<div id="ninja_forms_field_10_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
</div>

到目前为止我添加的修改:

/* Ninja Form mods */
.ninjacomment {
background: #ffbf00 !important;
border: 3px;
color: black !important;
width: 50%;
}

#ninja_forms_field_9 {
margin-left: 0;
width: 30%;
float: left;
position: inline-block;
}


#ninja_forms_field_10 {
margin-left: 0;
float: right;
position: inline-block;
}

.ninja-forms-all-fields-wrap {
overflow: hidden;
}

谢谢!

Answer 1

您可以通过多种方式在同一行上获取元素.

样本标记:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

内联块

.child {
  display: inline-block;
  width: 40%; /* adjust */
}

花车

.child {
  float: left; /* or right */
  width: 40%; /*adjust */
}

显示:表格

.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  width: 40%; /* adjust */
}

白色空间:nowrap

.parent {
  white-space: nowrap /* children will stay on the same line no matter how wide */
}