Я хочу выровнять текстовое поле и кнопку в одну строку. Я использую загрузчик 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%;
 }

Макет это делает:

введите описание изображения здесь

Я хочу кнопку сразу после текстового поля.

3
JimAnkit 4 Сен 2017 в 22:07

3 ответа

Лучший ответ

Вы должны дать правильную ширину для текстового поля и кнопки. Допустим, я хочу, чтобы кнопка занимала ширину 80 пикселей и отдыхала в текстовом поле. Тогда это может быть так.

.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)
 }

Используя гибкое пространство между ними, вы можете достичь этого. Вы также можете использовать float.

2
No one 4 Сен 2017 в 19:16

И Button, и Input являются блочными элементами, поэтому по умолчанию они занимают все доступное горизонтальное пространство. Вы можете изменить оба элемента на inline-block, чтобы вы могли определить ширину, которую вы хотите, чтобы они занимали. Попробуйте следующее CSS

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

Вы можете изменить ширину на любое значение, которое хотите, но убедитесь, что сумма меньше 100%. Фактически, оно должно составлять менее 95%, потому что между обоими элементами есть пустое пространство, которое имеет значение.

0
João Paulo Morais 4 Сен 2017 в 19:21

Мое решение будет похоже на @ Ни одно не дано, но в моем есть небольшая разница. Не нужно 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>
0
Suresh Ponnukalai 28 Фев 2018 в 11:54