как горизонтально встроить с использованием 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, но у меня это не работает. Поскольку я отправляю два данных за раз, поэтому я не могу использовать встроенный класс формы, первая форма предназначена для сведений о пользователе, а вторая - для сведений о продукте и оформления заказа за раз.

Answer 1

Наилучшего дизайна можно добиться с помощью таблиц. Это то, для чего используются таблицы - представление данных. Вы также можете использовать <input type="number"> для количества и соответственно обновить общую цену.

DOCS: 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

Я думаю, что лучше использовать макет таблицы или макет дисплея Flex или сетки.

Все теории ниже взяты из w3school ,

Макет таблицы:

Свойство table-layout определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы.

Основное преимущество раскладки стола: фиксированная; в том, что таблица отображается намного быстрее. В больших таблицах пользователи не будут видеть какую-либо часть таблицы, пока браузер не отобразит всю таблицу. Итак, если вы используете table-layout: fixed, пользователи будут видеть верхнюю часть таблицы, пока браузер загружает и отображает остальную часть таблицы. Создается впечатление, что страница загружается намного быстрее!

Дисплей Flex: Щелкните здесь

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>

Макет сетки: Ссылка здесь

Модуль CSS Макет сетки предлагает систему макета на основе сетки, с строками и столбцами, что упрощает для разработки веб-страниц без использования поплавков и позиционирования.

Мой выбор: Всегда есть разные подходы, но в ситуации, как вы упомянули, я бы предпочел go с дисплеем: гибкий метод.