如何使用引导程序或 css 水平内联

Question

I have read many questions and many articles but cant find my answer Here is my code result

Here is my code

 .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>

Help me to figure out how to align this I have done many techniques like the form-inline bootstrap class but doesn't work for me. Because I am submitting two data at a time so I cant use form-inline class first form is for user details and second for product details and checkout at a time.

Answer 1

The best design can be achieved using tables. This is what tables are used for - representation of data. You can also use <input type="number"> for quantity and update total price accordingly.

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

I think its better to use Table layout or Display Flex or Grid layout.

All the theories below are from w3school ,

Table Layout:

The table-layout property defines the algorithm used to lay out table cells, rows, and columns.

The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!

Display Flex: 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>

Grid Layout: Link here

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

My choice: There are always different approaches to do a thing, but in the situation, you mention I would prefer to go with display: flex method.