Question

我有一个表单页面，其中包含多个称为“ inputs”的div类每个div内是每个表单行的标签，input则是表单信息

其中之一的样本：

<div class="inputs">
  <label for="ProductDesc:_">ProductDesc: </label>
  <input disabled="disabled" id="invoices_ProductDesc" name="invoices.ProductDesc" readonly="readonly" type="text" value="Storage charge SC160-0000059 - 5.0 HCTZ0044 2018">
</div>
<div class="inputs">
  <label for="SKU:_">SKU: </label>
  <input disabled="disabled" id="invoices_ProductSKU" name="invoices.ProductSKU" readonly="readonly" type="text" value="">
</div>

现在显示如下：

ProductDesc

此处的信息

SKU

此处为SKU

我怎样才能做到

ProductDesc SKU

此处信息 此处是SKU

我尝试在输入上使用float:right，也尝试使用display:inline，但这似乎不起作用。

我想要的例子https://imgur.com/Evc0Hvs

Answer 1

在其周围环绕另一个div，并将其样式设置为display: flex

，将其设置为flexbox容器

Answer 2

display: inline-block;

应该可以，我认为还有其他样式可以影响整体样式。

工作示例：

https://codepen.io/5amdev/pen/povqrYm

如何使一系列div彼此相邻而不是彼此叠置？

2 个答案: