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 */
}

display：table

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

white-space：nowrap

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

Answer 2

<div id="wrapper">
    <div id="left">
        <input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9"></input>
    </div>
    <div id="right">
        <input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10"></input>
    </div>

<强> CSS

#wrapper {
    width:300px;
}
#left {
    float:left;
    width:146px;
}
#right {
    float:right;
    width:148px;
}

Working Fiddle