如何使用 bootstrap 或 css 水平内联

Question

我已经阅读了很多问题和很多文章但找不到我的答案这是我的代码结果

这是我的代码

.checkout-cart-total {
  background-color: #f5f5f5;
  padding: 45px;
}
@media only screen and (max-width: 575px) {
  .checkout-cart-total {
    padding: 30px;
  }
}
.checkout-cart-total h4 {
  flex-basis: 18px;
  line-height: 23px;
  font-weight: 600;
  color: #292929;
}
.checkout-cart-total h4:first-child {
  margin-top: 0;
  margin-bottom: 25px;
}
.checkout-cart-total h4:last-child {
  margin-top: 15px;
  margin-bottom: 0;
}
.checkout-cart-total h4 span {
  float: right;
  display: block;
}
.checkout-cart-total ul {
  border-bottom: 1px solid #292929;
}
.checkout-cart-total ul li {
  color: #292929;
  font-size: 14px;
  line-height: 23px;
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}
.checkout-cart-total ul li span {
  color: #292929;
  float: right;
}
.checkout-cart-total p {
  line-height: 30px;
  font-weight: 600;
  color: #292929;
  padding: 10px 0;
  border-bottom: 1px solid #292929;
  margin: 0;
}
.checkout-cart-total p span {
  float: right;
}

      <div class="col-12 mb-60">

        <h4 class="checkout-title">Cart Total</h4>

     <div class="checkout-cart-total">

      <h4>Product <span>Total</span></h4>
   <ul>

    <?php
    $cartres = $fetchcart->fetchAll(PDO::FETCH_ASSOC);
    foreach($cartres as $row){
        
    ?>     
                                               
                                               
                                               
                                           
      <li>
          <input type="text" disabled value="<?php echo $row['p_name']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;"> X
           <input type="text" disabled value="<?php echo $row['qty']; ?>" name="qty[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;">  
            <span><input type="text" disabled value="<?php echo $row['price']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"><input type="text" disabled value="<?php echo $row['p_id']; ?>" hidden name="product_id[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"></span>
            </li>
          <?php } ?>
              </ul>
 
  </div>
</div>

帮助我弄清楚如何调整这一点我已经完成了许多技术，例如 form-inline bootstrap 类，但对我不起作用。因为我一次提交两个数据，所以我不能使用 form-inline 类，第一个表单用于用户详细信息，第二个用于产品详细信息和一次结帐。

Answer 1

使用表格可以实现最佳设计。这就是表格的用途——数据的表示。您也可以使用<input type="number"> 获取数量并相应地更新总价。

文档：https://getbootstrap.com/docs/4.5/content/tables/

/*DEMO*/body{padding:2rem}input[type="number"]{max-width:75px}
tbody th,tbody td{vertical-align:middle!important}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
    <div class="col-12">
        
        <h4>Cart Total</h4>
        
        <table class="table table-striped table-hover">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Product</th>
                    <th scope="col">Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Lorem Ipsum</td>
                    <td>1400</td>
                    <td><input class="form-control form-control-sm" type="number" value="1"></td>
                    <td>1400</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Dolor Sit Amet</td>
                    <td>425</td>
                    <td><input class="form-control form-control-sm" type="number" value="2"></td>
                    <td>850</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Lorem Lorem</td>
                    <td>850</td>
                    <td><input class="form-control form-control-sm" type="number" value="1"></td>
                    <td>850</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 2

我认为最好使用 Table 布局或 Display Flex 或 Grid 布局。

以下所有理论均来自w3school，

Table Layout:

table-layout 属性定义了用于布局表格单元格、行和列的算法。

表格布局的主要好处：固定；是表格呈现得更快。在大表上，在浏览器呈现整个表之前，用户将看不到表的任何部分。因此，如果您使用 table-layout: fixed，用户将在浏览器加载和呈现表格的其余部分时看到表格的顶部。这给人的印象是页面加载速度更快！

显示弹性： Click here

HTML：

<div> // display:flex, flex-direction:column, justify-content:space-around

<div> // display:flex, flex-direction:row, justify-content:space-around
 <div> </div>
<div> </div>
</div>

<div> // display:flex, flex-direction:row, justify-content:space-around
 <div> </div>
<div> </div>
</div>

</div>

网格布局： Link here

CSS 网格布局模块提供基于网格的布局系统，具有行和列，使网页设计更容易，而无需使用浮动和定位。

我的选择： 做一件事总是有不同的方法，但在这种情况下，你提到我更愿意使用 display: flex 方法。