时间戳

首页 > 解决方案 > 根据按钮大小自动调整输入大小？

html - 根据按钮大小自动调整输入大小？

问题描述

我在同一个 div 中有一个input和一个button，并且希望它们在一行中没有任何间隙，无论屏幕大小如何，但无法实现。该按钮似乎有一个水平填充，尽管我将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>

标签： htmlcss

解决方案

如果我了解您的需求，您可能需要使用弹性盒。

我添加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>

推荐阅读