Блог

Главная - Вопросы по программированию - Автоматическое изменение размера ввода в соответствии с размером кнопки?

Автоматическое изменение размера ввода в соответствии с размером кнопки?

#html #css

#HTML #css

Вопрос:

У меня есть an input и a button в одном div, и я хочу, чтобы они были в одной строке без какого-либо промежутка между ними, независимо от размера экрана, но не могу добиться этого. Кнопка, похоже, имеет горизонтальное заполнение, хотя я установил оба padding и margin none , поэтому% не будет решением. Кроме того, я хотел бы, чтобы кнопка обтекала ее содержимое, поэтому, даже если бы это могло сработать, это было бы не лучшим решением. Есть ли способ установить местоположение и размер кнопки и соответствующим образом изменить размер ввода с помощью CSS? Или для этого нужен какой-то JavaScript?

Желаемый результат:

Желаемый результат

Текущий вывод:

Пробел в кнопкеКнопка переходит к следующей строке

Текущий код (CSS незначителен, поскольку он не работает)

 .chatinp {
  height: 10px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  size: fixed;
  height: auto;
  border-top: solid;
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 95%;
  background: none;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 10%;
  background-color: #090;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}  
 <div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

Комментарии:

1. Вы должны пойти посмотреть flexbox .

2. Как будет выглядеть конечный результат? Не могли бы вы нарисовать картинку или что-нибудь еще, пожалуйста

3. @CBroe будет лучше использовать grid ryt? чтобы мы могли указать требуемое пространство для каждого элемента в нем.

4. @SandrinJoy grid — это, по сути, двумерная версия того, что flexbox уже предлагает для one single direction. Но проблема здесь только в одном направлении, ширина; высота не вступает в игру. Таким образом, flexbox может выполнить эту работу и здесь.

5. спасибо за эту информацию @CBroe ✌👍

Ответ №1:

Для этого можно использовать несколько инструментов :

Пример с плавающей точкой

 .chatinp {
  height: 30px;
  width: 100%;
}

#CHAT, #SEND{
  box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
  height: 100%; /* use all of the avaible height given by the parent */
  padding: none;
  margin: none;
  position: relative; /* needed for float */
  float: left; /* make element align from left to right, then top to bottom */
}

#CHAT {
  width: 85%;
  border: 3px solid grey;
}

#SEND {
  width: 15%;
  border: 3px solid green;
}  
 <div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND" id="SEND">SEND</button>
</div>

Ответ №2:

Возможно, вам потребуется использовать гибкие поля, если я понял ваше требование.

Я добавил display: flex в родительский контейнер ( .chatnip ) и flex : <value> в дочерние элементы, чтобы указать им, сколько места они должны занимать.

Между полями нет зазора.

 .chatinp {
  height: 10px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  size: fixed;
  height: auto;
  border-top: solid;
  display: flex
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  height: 100%;
  background: none;
  border: solid 1px #fff;
  color: white;
  flex: 9;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: #090;
  border: solid 1px #fff;
  color: white;
  padding: none;
  margin: none;
  flex: 1;
}  
 <div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

Ответ №3:

Поскольку вы используете flexbox, постарайтесь извлечь из него максимум пользы. Для chatinp использования класса display: flex и для #CHAT использования flex: 1 при необходимости добавьте ширину для #SEND 

 .chatinp {
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  border-top: solid;
  display: flex;
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  /* position: relative; */
  /* bottom: 0; */
  left: 0;
  height: 100%;
  /* width: 95%; */
  background: none;
  border: solid 1px #fff;
  padding: none;
  margin: none;
  flex: 1;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  /* position: relative; */
  /* bottom: 0; */
  /* right: 0; */
  /* height: 100%; */
  /* width: 10%; */
  background-color: #090;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}  
 <div class="chatinp">
  <input type="text" name="CHAT" id="CHAT" />
  <button name="SEND" id="SEND">SEND</button>
</div>

Ответ №4:

Я предпочитаю использовать grid , где вы можете указать, какая часть и количество элементов должны быть размещены в одной строке

 div{
display:grid;
grid-template-columns:80vw auto;/*auto auto , if you don't need any specific space for the items*/
}  
 <div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

Ответ №5:

добавьте это в свой css: (и избавьтесь от высоты: 100%; из #CHAT)

 .chatinp {
  display: flex;
}

#CHAT {
  height: auto;
}