html - 如何将两个html元素放在同一行的相对两侧

Question

我正在尝试设计这个（我正在使用引导程序）：

这是代码：

<div class="container-fluid" id="products">
    <h2 class='wishlist-title text-center'>My Wishlist ({{ productList|length }} items)</h2>
    {% for product in productList %}
    <div class='userProduct text-left'>
        <a class='product-title' href="{{ product.productURL }}" target="_blank">{{ product.title|truncate(30) }}</a>
        <h4 class="current-price text-right">Current Price: ${{ product.currentPrice }}</h4>
        <h4 class="budget">Budget: ${{ product.userBudget }}</h4>
        <form class='adjust-budget' method="POST" action="{{ url_for('budget', id=product.id) }}">
            <input class='budget-update input-lg' type="number" id="new_budget" name="new_budget" min="0" max="{{ product.currentPrice }}" step=".01"><br>            
            <input class='budget-update-btn btn btn-primary' type="submit" value="Adjust Budget">
        </form>
        <form class='remove-wishlist' action="{{ url_for('delete', id=product.id) }}">
            <button class="btn btn-danger" type="submit">Remove from Wishlist</button>
        </form>
        
        {% if loop.index < productList|length %}
        <hr>
        {% endif %}
    </div>
    {% endfor %}
</div>

和当前的 css

body {
    padding-top: 50px;
    font-family: Cabin;
    font-size: 20px;
  }
  
  footer {
    color: #111111;    
    position: absolute;
    bottom: 0;
    width: 100%;  
    
}

.form-track {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.product-title {
  display: inline-block;
  
}

.current-price {
  display: inline-block;
  
}

.adjust-budget {
  display: inline-block;
  
}

.remove-wishlist {
  display: inline-block;
  
}

  .logo {
    font-size: 30px;
  }  
  
  /*
   * Global add-ons
   */
  
  .sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  /*
   * Top navigation
   * Hide default border to remove 1px line.
   */
  .navbar-fixed-top {
    border: 0;
  }
  
  
  /*
   * Main content
   */
  
  .main {
    padding: 20px;
  }
  @media (min-width: 768px) {
    .main {
      padding-right: 40px;
      padding-left: 40px;
    }
  }
  .main .page-header {
    margin-top: 0;
  } 

我本质上希望当前价格与产品标题在同一条线上，但要保持在右侧并做出响应。另外，我怎样才能使调整预算按钮和输入区域并排并使其大小相同？最后，我希望从愿望清单中删除按钮与调整预算按钮位于同一行（类似于当前价格和产品标题）

我试过用 display: inline-block 和宽度和填充做一些事情，但它没有响应

TLDR 我怎样才能把它设计成这样：

Answer 1

将您的 html 修改为如下所示，我添加了一些 div 以使用 css flex 属性

 <div class="container-fluid" id="products">
    <h2 class='wishlist-title text-center'>My Wishlist ({{ productList|length }} items)</h2>
    {% for product in productList %}
    <div class='userProduct text-left'>
       <div class="productprice">
        <a class='product-title' href="{{ product.productURL }}" target="_blank">{{ product.title|truncate(30) }}</a>
        <h4 class="current-price text-right">Current Price: ${{ product.currentPrice }}</h4>
       </div>
       
        <h4 class="budget">Budget: ${{ product.userBudget }}</h4>
        <div class="formdiv">
            <form class='adjust-budget' method="POST" action="{{ url_for('budget', id=product.id) }}">
                <input class='budget-update input-lg' type="number" id="new_budget" name="new_budget" min="0" max="{{ product.currentPrice }}" step=".01"><br>            
                <input class='budget-update-btn btn btn-primary' type="submit" value="Adjust Budget">
            </form>
            <form class='remove-wishlist' action="{{ url_for('delete', id=product.id) }}">
                <button class="btn btn-danger" type="submit">Remove from Wishlist</button>
            </form>
        </div>
       
        {% if loop.index < productList|length %}
        <hr>
        {% endif %}
    </div>
    {% endfor %}
</div>

并添加这些 CSS

    .adjust-budget {
      display: flex;
    }
    
    .productprice,.formdiv{
        display: flex;
        justify-content: space-between;
    }

  

并且它将类似于您在图像中的预期，因为您的服务器端代码已编译，因此不会打印动态值