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

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空间 - 你可以实现这一点。你也可以使用浮动。

Answer 2

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

Answer 3

Button和Input都是块元素，因此默认情况下它们将占用整个可用的水平空间。您可以将两个元素都更改为内联块，这样您就可以定义任何一个元素占用的宽度。尝试以下css

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

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

Answer 4

我的解决方案与@No给出的解决方案类似，但我的解决方案略有不同。不需要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>