Question

我有这些HTML元素：

<div id="div1">
       <h2>Search what you want</h2>
      <input id="textSearch" type="text" class="form-control input-lg" placeholder="Search" />
</div>

<div id="div2">
<select id="droplist" class="form-control">
  <option>Option</option>
</select>
</div>

我试图将它们显示为内联但我无法找到方法。我搜索了SO并应用了一些解决方案，比如将div中的两个元素（div1和div2）都包含在内，并在CSS代码中添加如下内容：

#div1, #div2
{
   display: inline;
}

我也尝试使用inline-block和许多其他解决方案，但没有一个能够工作。有可能这样做吗？

Answer 1

您还需要h2内嵌div1：

#div1, #div2, #div1 h2
{
   display: inline;
}

Answer 2

您可以尝试：

#div1, #div2 {
  display: inline-block;
}

或：

#div1, #div2 {
  width: 50%;
  float: left;
}

作为旁注，请考虑使用类名来代替样式而不是id-s。

Answer 3

请试试这个： HTML：

<div id="disptable">
<div id="disptabcell">
       <span>Search what you want:</span>
      <input id="textSearch" type="text" class="form-control input-lg" placeholder="Search" />
</div>
<div id="disptabcell">
<select id="droplist" class="form-control">
  <option>Option</option>
</select>
</div>
</div>

CSS：

#disptable{display:table}
#disptabcell{display:table-cell}
span{font-size:18px;font-weight:bold}

如何在div后显示内联一个select元素？

3 个答案: