根据按钮大小自动调整输入大小? [英] Automatically resize input according to button size?

问题描述

我在同一个 div 中有一个 input 和一个 button，并且希望它们在一行中，中间没有任何间隙，无论屏幕大小如何，但是不能让它发生.该按钮似乎具有水平填充，尽管我将 padding 和 margin 都设置为 none，因此 % 不是解决方案.此外，我希望按钮环绕其内容，因此即使它可以工作，也不是最好的解决方案.有没有办法设置按钮的位置和大小并使用 CSS 相应地调整输入大小?还是需要一些 JavaScript 才能做到这一点?

期望的输出:

电流输出:

当前代码(CSS 无关紧要，因为它不起作用)

.chatinp {高度:10px；宽度:100%；位置:绝对；溢出:隐藏；底部:0；右:0；尺寸:固定；高度:自动；边框顶部:实心；}#聊天 {字体系列:等宽；字体大小:20px；位置:相对；底部:0；左:0；高度:100%；宽度:95%；背景:无；边框:实心 1px #fff;填充:无；边距:无；}#发送 {字体系列:等宽；字体大小:20px；位置:相对；底部:0；右:0；高度:100%；宽度:10%；背景色:#090；边框:实心 1px #fff;填充:无；边距:无；}

<input type="text" name="CHAT" id="CHAT"><button name="SEND", id="SEND">SEND</button>

解决方案

您可以使用多种工具来实现:

• CSS 属性 float(下面的例子)
  • 即使在旧浏览器上也能运行
  • 不适合复杂使用(就您而言，那很好)
• CSS 网格布局
• CSS Flex 元素

浮动示例

.chatinp {高度:30px；宽度:100%；}#聊天，#发送{box-sizing: 边框框；/* 允许在不超过宽度的情况下使用边框和填充 */高度:100%；/* 使用父级提供的所有可用高度 */填充:无；边距:无；位置:相对；/* 需要浮动 */向左飘浮;/* 使元素从左到右对齐，然后从上到下 */}#聊天 {宽度:85%；边框:3px 纯灰色；}#发送 {宽度:15%；边框:3px纯绿色；}

<input type="text" name="CHAT" id="CHAT"><button name="SEND" id="SEND">SEND</button>

I have an input and a button in the same div, and want them to be in a single line without any gap in between, regardless of screen size, but cannot get that to happen. The button seems to have a horizontal padding, although I set both padding and margin to none, so % wouldn't be a solution. Also, I would like the button to wrap around its contents, so even if it could work, it wouldn't be the greatest solution. Is there a way to set the location and size of the button and resize the input accordingly with CSS? Or is some JavaScript needed to do this?

Desired Output:

Current Output:

Current code (CSS is insignificant, as it doesn't work)

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

解决方案

You can use several tools to achieve that :

• CSS property float (example below)
  • will run even on old browser
  • doesn't fit for complex use (in your case, that fine)
• CSS Grid Layout
• CSS Flex element

Float Example

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

这篇关于根据按钮大小自动调整输入大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！