【发布时间】：2020-03-05 22:09:07
【问题描述】：
我一直在测试并寻找可行的方法。我将此问题用作帮助，但现在我无法将图像放在付款方式按钮的右侧。
这是我的代码：
.right-column {
background-color:#f6f7f9;
border: solid 1px lightblue;
height:1078px;
padding:15px;
}
.row-heading {
text-align:center;
padding:0;
}
.payment-img {
width:84px;
height:100%;
padding:0 0 0 15px;
}
.paypal-payment {
width:150px;
height:45px;
}
.cash-payment {
}
.payment-rows {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.payment-form {
padding:0;
}
.payment-method-checkbox {
padding:50px 0 0 0;
font-size:15px;
}
.payment-method {
border:1px solid white;
background-color:#4ab847;
color:white;
height:35px;
width:100%;
font-size:12px;
font-weight:bold;
text-align:center;
}
.payment-method:hover, .payment-method:focus, .payment-method:active {
color: #4DB748;
background-color: #ffffff;
border-color: #4DB748;
}
.terms-conditions {
color:dodgerblue;
}
.right-column {
height:501px;
}
.row-heading {
font-size:22px;
}
.reservation_summary, .total_costs {
font-size:22px;
}
.div-btn-paypal, .div-btn-cash, .div-btn-visa {
padding:0;
}
.visa-payment {
padding:0;
}<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
<h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
<div class="payment-form">
<form class="payment-form-start" action="/action_page.php">
<div class="payment-rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-paypal">
<input type="button" class="payment-method" value="PayPal">
<br>
</div>
<div>
<img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
</div>
<br>
</div>
<div class="payment-rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
<input type="button" class="payment-method" value="Cash">
<br>
</div>
<div>
<img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
</div>
</div>
<br>
<div class="payment-rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
<input type="button" class="payment-method" value="MasterCard/Visa">
<br>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
<img class="payment-img" src="/images/base/maestro.png">
<img class="payment-img" src="/images/base/mastercard.png">
<img class="payment-img" src="/images/base/visa.png">
</div>
</div>
<br>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
<input type="checkbox" class="payment-method-checkbox" required="">
<span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms & Conditions</a></span>
</div>
</form>
</div>
</div>【问题讨论】：
-
我没有阅读并且不同意条款和条件。严肃地说，还请分享 HTML，以便我们重现您当前的情况
-
我输入了我的 html 代码，它没有显示出来。
-
我用代码 sn-p 编辑了您的问题。请在将来使用它。是编辑工具栏中的
[<>]按钮。这是你现在的情况吗？ -
这是我目前的情况。但按钮并不像代码 sn-p 中显示的那么宽。
-
所以这不是你现在的情况。你在使用引导程序吗？因为我看到了一些引导类
标签： html css flexbox alignment