Ввод текста и ввод кнопки в ту же строку

Я хотел бы создать div, который содержит текстовый ввод и ввод кнопки в той же строке.Ввод текста и ввод кнопки в ту же строку

Ширина div будет установлена мной. Эти два входа должны заполнить div таким образом, чтобы ширина ввода кнопки была задана по его значению, а остальная часть пространства была заполнена текстовым вводом.

Я хочу что-то вроде:

<div style="width: 300px; background-color: orange"> 
    <input type="text" /> 
    <input type="button" value="Save" /> 
</div>

enter image description here

Извините за мой плохой английский.

источник

2014-05-14 ChocapicSz

Этот ответ может помочь: http://stackoverflow.com/questions/18961918/css-fill-remaining-width. задается почти тот же вопрос. –

Demo: http://jsfiddle.net/abhitalks/Y64ny/

Вы должны обернуть текст input в другой DIV. Нанесите display:table на контейнер div и display:table-cell и width:100% на обертку div.

HTML:

<div style="width: 300px; background-color: orange"> 
    <div class="t"> <!-- This is the wrapper div around the text input --> 
     <input type="text" /> 
    </div> 
    <input type="button" value="Save" /> 
</div>

CSS:

div { display: table; } 
div.t { 
    display: table-cell; 
    width: 100%; 
} 
div.t > input { 
    width: 100%; 
}

Update:

Как Op (@ChocapicSz) говорится в комментарии ниже, добавив box-sizing:border-box будет исправить прокладки.

Обновлено скрипку:

источник

2014-05-14 13:28:06 Abhitalks

Это приятное решение. Моя проблема заключалась в том, что после того, как я решил эту проблему, мне пришлось добавить дополнение к текстовому вводу, и он попал под вход кнопки. Очень приятным решением для этого является размер коробки. :) – ChocapicSz

@ChocapicSz: вы абсолютно правы. Я добавил это как обновление для ответа. Благодарю. – Abhitalks

<style> 

.f-lft { 
    float:left; 
    border:2px solid orange; 
} 

</style> 

<body> 
<div style="width: 300px;"> 
    <div> 
    <input class="f-lft"type="text" style="width:80%"/> 
    <input class="f-lft" type="button" value="Save"/> 
</div> 
</div> 
</body>

Я приложил скрипку вы http://jsfiddle.net/GLAee/

Я сделал ни одного. Оставайтесь лучше.

Отредактировано: ширина добавить текстовое поле в процентах

источник

2014-05-14 13:24:11 Karthikeyan

Не получится, попробуйте ширину: 200 px для родительского div –

Использование позиции абсолютной и немного реструктуризации CSS может работать лучше для вас.

Также использование <button> вместо <input type="button"> делает жизнь немного более легкой в стиле.

Я создал пример на codepen, чтобы вы могли видеть.

HTML:

<div class="container" style="width: 300px"> 
    <input type="text" class="text_input" /> 
    <button value="Save" class="btn">CLICK</button> 
</div> 

<div class="container" style="width: 500px"> 
    <input type="text" class="text_input" /> 
    <button value="Save" class="btn">CLICK</button> 
</div> 

<div class="container" style="width: 200px"> 
    <input type="text" class="text_input" /> 
    <button value="Save" class="btn">CLICK</button> 
</div>

CSS:

.container { 
    position: relative; 
    border: 3px solid orange; 
    height: 50px; 
    overflow: hidden; 
    margin-bottom: 10px; 
} 

.text_input { 
    height: 44px; 
    width: 60%; 
    padding: 0; 
    line-height: 30px; 
    font-size: 20px; 
    padding: 0; 
    margin: 3px; 
    margin-left: 20px; 
    border: none; 
} 
.text_input:focus { 
    outline: none; 
} 

.btn { 
    position: absolute; 
    height: 50px; 
    line-height: 50px; 
    right: 0; 
    top: 0; 
    margin: 0; 
    padding: 0; 
    background: orange; 
    color: white; 
    border: none; 
    width: 30%; 
    font-weight: bold; 
} 

.btn:hover { 
    color: black; 
    cursor: pointer; 
}

дает вам это:

enter image description here

Смотреть это работает на codepen

источник

2014-05-14 13:25:13 mjwatts

Я хотел, чтобы кнопка щелчка имела одинаковую ширину все время, если текст тот же, но спасибо в любом случае! – ChocapicSz

Вы можете установить ширину в пикселях и по-прежнему иметь вход в виде процента - это означало бы, что иногда может быть промежуток между краем ввода и кнопкой справа, но поскольку я выбрал «контур» с css, который не должен быть слишком очевидным. Вы также можете установить ширину входного сигнала с помощью JS для определения ширины. – mjwatts

http://jsfiddle.net/8FC2t/

<div> 
    <input type="text" class='save'/> 
    <input type="button" value="Save" /> 
</div> 
<br> 
<div> 
    <input type="text" class='dns' /> 
    <input type="button" value="Do not Save" /> 
</div> 



div{ 
    width:200px; 
    background-color:orange; 

} 
.dns{ 
    width:calc(100% - 105px) 
} 
.save{ 
    width:calc(100% - 65px) 
} 
div>input[type='button']{ 
    float:right; 
}

источник

2014-05-14 13:29:51

Я не хотел устанавливать ширину кнопок, я хотел, чтобы ширина кнопок была рассчитана автоматически в зависимости от текста внутри. – ChocapicSz

Ввод текста и ввод кнопки в ту же строку

ответ

Смежные вопросы