4

我想在一行中对齐文本框和按钮。我正在使用引导 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%;
 }

它使布局：

在此处输入图像描述

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

4

4 回答 4

3

您需要为文本框和按钮提供适当的宽度。可以说我希望按钮的宽度为 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 可以实现这一点。您也可以使用浮动。

于 2017-09-04T19:16:57.063 回答
0

Using <div class="d inline ">
will work for you

于 2017-09-04T19:12:33.193 回答
0

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

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

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

于 2017-09-04T19:21:35.077 回答
0

我的解决方案将类似于@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>

于 2018-02-28T11:54:28.793 回答