使按钮位于同一行

时间：2019-03-22 08:55:34

标签： css

我创建了一个页面，该页面具有彼此相邻的地址列表。我遇到的问题是我没有让按钮处于同一行。因此，我希望按钮将始终位于同一行。

这是我的Codepen CODEPEN

这是我的代码

position: absolute

我尝试过类似package com.AdaptivePayment.Service; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.stereotype.Service; import com.paypal.exception.ClientActionRequiredException; import com.paypal.exception.HttpErrorException; import com.paypal.exception.InvalidCredentialException; import com.paypal.exception.InvalidResponseDataException; import com.paypal.exception.MissingCredentialException; import com.paypal.exception.SSLConfigurationException; import com.paypal.sdk.exceptions.OAuthException; import com.paypal.svcs.services.AdaptivePaymentsService; import com.paypal.svcs.types.ap.PayRequest; import com.paypal.svcs.types.ap.PayResponse; import com.paypal.svcs.types.ap.Receiver; import com.paypal.svcs.types.ap.ReceiverList; import com.paypal.svcs.types.common.RequestEnvelope; @Service public class AdaptivePaymentService { String UserName= " caller_1312486258_biz_api1.gmail.com"; String Password= "1312486294"; String Signature= " AbtI7HV1xB428VygBUcIhARzxch4AL65.T18CTeylixNNxDZUu0iO87e"; public Map<String, Object> createPayment(Double total, String email) throws SSLConfigurationException, InvalidCredentialException, UnsupportedEncodingException, HttpErrorException, InvalidResponseDataException, ClientActionRequiredException, MissingCredentialException, OAuthException, IOException, InterruptedException{ Map<String, Object> response = new HashMap<String, Object>(); RequestEnvelope env = new RequestEnvelope(); env.setErrorLanguage("en_US"); List<Receiver> receiver = new ArrayList<Receiver>(); Receiver rec = new Receiver(); rec.setAmount(total); rec.setEmail(email); receiver.add(rec); ReceiverList receiverlst = new ReceiverList(receiver); PayRequest payRequest = new PayRequest(); payRequest.setReceiverList(receiverlst); payRequest.setRequestEnvelope(env); Map<String, String> customConfigurationMap = new HashMap<String, String>(); customConfigurationMap.put("mode", "sandbox"); // Load the map with all mandatory parameters AdaptivePaymentsService adaptivePaymentsService = new AdaptivePaymentsService(customConfigurationMap); PayResponse payResponse = adaptivePaymentsService.pay(payRequest,UserName); response.put("status", "success"); response.put("payment", payResponse); return response; } } 之类的事情，但效果并不理想

2 个答案:

答案 0 :(得分：0)

您可以将flexbox添加到列容器中，并将项目与每列的末尾对齐。我还设置了不包装的盒子（可选）。

<div class="row d-flex flex-nowrap align-items-end">
  …
</div>

演示

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row d-flex flex-nowrap align-items-end">
  <div class="col-lg-4">
    <form action="http://laravel-site.test/account/addresses-radio/4" method="post">
      <input type="hidden" name="_token" value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">
      <div class="form-check">
        <input type="radio" class="form-check-input" name="address_option" id="address_4" checked="">
        <label for="address_4" class="form-check-label">
					Compex 1 <br>
					Address 1 <br>
					Suburb 1 <br>
					City 1 <br>
					Provice 1 <br>
					Code 1 <br>
				</label>
      </div>
    </form>

    <div class="row">
      <div class="col-lg-1">
        <div class="edit-button">
          <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <form action="http://laravel-site.test/account/addresses-radio/5" method="post">
      <input type="hidden" name="_token" value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">
      <div class="form-check">
        <input type="radio" class="form-check-input" name="address_option" id="address_5">
        <label for="address_5" class="form-check-label">
					Address 2 <br>
					Suburb 2 <br>
					City 2 <br>
					Provice 2 <br>
					Code 2 <br>
				</label>
      </div>
    </form>

    <div class="row">
      <div class="col-lg-1">
        <div class="edit-button">
          <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <form action="http://laravel-site.test/account/addresses-radio/6" method="post">
      <input type="hidden" name="_token" value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">
      <div class="form-check">
        <input type="radio" class="form-check-input" name="address_option" id="address_6">
        <label for="address_6" class="form-check->label">
					Compex 3 <br>
					Address 3 <br>
					Suburb 3 <br>
					City 3 <br>
					Provice 3 <br>
					Code 3 <br>
				</label>
      </div>
    </form>

    <div class="row">
      <div class="col-lg-1">
        <div class="edit-button">
          <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

您可以通过这种方式编辑html，以使所有按钮都位于同一行。 将所有按钮放在主行容器之外的类row中的同一col-lg-4中。这是用于运行stackblitz的链接。

<div class="row">
    <div class="col-lg-4">
        <form action="http://laravel-site.test/account/addresses-radio/4" method="post">
            <input type="hidden" name="_token" value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">                                        
            <div class="form-check">
                <input type="radio" class="form-check-input" name="address_option" id="address_4" checked="">
                <label for="address_4" class="form-check-label">
                    Compex 1 <br>
                    Address 1 <br>
                    Suburb 1 <br>
                    City 1 <br>
                    Provice 1 <br>
                    Code 1 <br>
                </label>
            </div>
        </form>
    </div>  
    <div class="col-lg-4">
        <form action="http://laravel-site.test/account/addresses-radio/5"         method="post">
            <input type="hidden" name="_token"        value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">                                     
            <div class="form-check">
                <input type="radio" class="form-check-input"        name="address_option" id="address_5">
                <label for="address_5" class="form-check-label">
                    Address 2 <br>
                    Suburb 2 <br>
                    City 2 <br>
                    Provice 2 <br>
                    Code 2 <br>
                </label>
            </div>
        </form>
    </div>
    <div class="col-lg-4">
        <form action="http://laravel-site.test/account/addresses-radio/6" method="post">
            <input type="hidden" name="_token" value="6cR6PuL173IvCG1dXwEDwybbI5BFxtMlbAeXfPwz">                                        
            <div class="form-check">
                <input type="radio" class="form-check-input" name="address_option" id="address_6">
                <label for="address_6" class="form-check->label">
                    Compex 3 <br>
                    Address 3 <br>
                    Suburb 3 <br>
                    City 3 <br>
                    Provice 3 <br>
                    Code 3 <br>
                </label>
            </div>
        </form>
    </div>
</div>                                          
    <div class="row">
            <div class="col-lg-4">
                <div class="edit-button">
                    <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
                </div>
            </div>
        <div class="col-lg-4">
                <div class="edit-button">
                    <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="edit-button">
                    <a href="http://laravel-site.test/account/create-address" class="btn btn-primary">Add Address</a>
                </div>
            </div>
        </div>
相关问题
最新问题