![](/img/trans.png)
[英]Is there a way to put two horizontal html lists on opposite sides of a page on the same line?
[英]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 做一些事情,但它没有响应
将您的 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.