在一個表單中，我有一個文本輸入和一個<a>代表一個按鈕來添加一個輸入元素。
<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<a href="javascript:void(0);" class="add_button" title="Add"><img src="../img/add-icon.png"/></a>
</div>
目前每個元素都有自己的一行，但它們應該在一行中：
我怎樣才能做到這一點？
使用引導類。
uj5u.com熱心網友回復：
在css中添加以下代碼：
.col-4{
display:flex;
align-items:center;
justify-content:space-between;
width:300px;
height:auto;
border:1px solid #000;
border-radius:5px;
}
.col-4 input{
width:250px;
height:100%;
font-size:1rem;
border:none;
padding:1rem 0.4rem;
outline:none;
}
.col-4 a{
height:fit-content;
}
.col-4 a img{
width:40px;
height:40px
}<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<a href="javascript:void(0);" class="add_button" title="Add"><img src="../img/add-icon.png"/></a>
</div>uj5u.com熱心網友回復：
請嘗試使用d-flex而不是col-4
如： <div >
另一種方法是使用引導程式的行和列，如
<div class="row">
<div class="col">
Input here..
</div>
<div class="col">
Button here..
</div>
</div>
參考：
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419519.html
標籤：