时间戳

首页 > 解决方案 > 如何让一系列 div 彼此相邻而不是彼此重叠显示？

html - 如何让一系列 div 彼此相邻而不是彼此重叠显示？

问题描述

我有一个表单页面，其中有多个名为“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>

现在显示是这样的：

产品描述

信息在这里

库存单位

SKU在这里

我怎样才能使它成为

产品描述 SKU

信息在这里 SKU 这里

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

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

标签： htmlcss

解决方案

将另一个 div 包裹在它们周围，并将其设置为 flexbox 容器，将其设置为display: flex

推荐阅读