html - 如何在一行中对齐 Bootstrap 文本框和按钮？

Question

我想在一行中对齐文本框和按钮。我正在使用 Bootstrap css。以下是我正在使用的代码。

HTML:

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

CSS:

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
 }

布局:

enter image description here

我想要文本框后面的按钮。

Answer 1

您需要为文本框和按钮提供适当的宽度。可以说我想让按钮的宽度为 80px 并保留到文本框。那么它可能是这样的。

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display: flex;
   justify-content:space-between;

 }
 .new-meows button{
    width: 80px;
 }
.new-meows input{
    width: calc(100% - 80px)
 }

使用 flex space-between 你可以做到这一点。您也可以使用 float 。