繁体   English   中英

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

[英]How to put two html elements on the same line on opposite sides

我正在尝试设置样式(我正在使用引导程序): 在此处输入图片说明

这是代码:

<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 和 width 和 padding 做一些事情,但它没有响应

TLDR 我怎样才能把它设计成这样: 在此处输入图片说明

将您的 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;
    }

  

它将类似于您在图像中期望的内容,因为您的服务器端代码已编译,因此不会打印动态值

在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM