Question

我想要调整输入，以便按钮不会掉到this example的下一行。

我尝试了一些事情，但我不能干净利落地做到这一点。

<div class="col-lg-3">
<form class="search" method="get" action="/" role="search">
    <input type="search" name="s" placeholder="Search">
    <button class="glyphicon glyphicon-search" role="button" type="submit"></button>
</form>
</div>

form {
    input {
     width: 145px;   
    }
    button {
     width: 50px;   
    }
}

Answer 1

请更新以下风格。

button {
     width: 50px;
     left: -5px;
    }

或

添加搜索类的显示属性。

.search {display: inline-flex;}

Answer 2

如果你可以使用flexbox，那你怎么用？

   form { 
        display: flex;
    } 
        input {
         flex-grow: 1;
         width: 100%;
         max-width: 150px;   
        }
        button {
         width: 50px;   
        }

https://jsfiddle.net/33cL1v6s/3/

在响应框中水平适合形式

2 个答案: