如何在一行中对齐 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

使用 <div class="d inline ">
会为你工作

Answer 2

您需要给文本框和按钮适当的宽度。可以说我想让按钮的宽度为 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。

Answer 3

Button 和 Input 都是块元素，因此默认情况下它们会占据整个可用的水平区域 space。您可以将这两个元素都更改为行内块，这样您就可以定义您希望其中任何一个占据的宽度。尝试以下 css

.new-meows input {display:inline-block;width:80%;}
.new-meows button {display:inline-block;width:15%;}

您可以将宽度更改为您想要的任何值，但请确保总和小于 100%。事实上，它应该小于大约 95%，因为在两个元素之间有一个重要的空 space。

Answer 4

我的解决方案与@No one given 类似，但我的解决方案略有不同。不需要 justify-content:space-between;，使用 flex:1 而不是 width: calc(100% - 80px)。 flex1 属性会自动分配剩余宽度，而不是计算宽度。

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display:flex;
 }
 .new-meows input {
   flex:1
 }
 .new-meows button {
   width:80px;
 }

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

如何在一行中对齐 bootstrap 文本框和按钮？

How to align bootstrap text-box and button in one line?

html

css

bootstrap-4

bootstrap-ui