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

我在同一个div中有一个

输入

和一个

按钮

，我希望它们在一行中，无论屏幕大小如何，中间都没有任何间隙，但我无法实现这一点。该按钮似乎有一个水平填充，尽管我将

填充

和

边距

都设置为

无

，因此%不是一个解决方案。此外，我希望按钮能够环绕其内容，因此即使它可以工作，也不是最好的解决方案。有没有办法设置按钮的位置和大小，并使用CSS相应地调整输入的大小？或者需要一些JavaScript来完成这项工作

期望输出：

电流输出：

当前代码（CSS不重要，因为它不工作）

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

邮寄

将这些添加到css中：（并去除身高：100%；来自#聊天）

将这些添加到css中：（并去掉身高：100%；来自#聊天）

---

如果我了解您的需求，您可能需要使用

我在父容器（

.chatnip

）上添加了

display:flex

，在子元素上添加了

flex:

，告诉它们应该占用多少空间

盒子之间没有空隙

.chatinp{
高度：10px；
宽度：100%；
位置：绝对位置；
溢出：隐藏；
底部：0；
右：0；
尺寸：固定；
高度：自动；
边框顶部：实心；
显示器：flex
}
#聊天{
字体系列：monospace；
字体大小：20px；
位置：相对位置；
底部：0；
左：0；
身高：100%；
背景：无；
边框：实心1px#fff；
颜色：白色；
弹性：9；
}
#发送{
字体系列：monospace；
字体大小：20px；
位置：相对位置；
底部：0；
右：0；
身高：100%；
背景色：#090；
边框：实心1px#fff；
颜色：白色；
填充：无；
保证金：无；
弹性：1；
}

邮寄

如果我了解您的需求，您可能需要使用

我在父容器（

.chatnip

）上添加了

display:flex

，在子元素上添加了

flex:

，告诉它们应该占用多少空间

盒子之间没有空隙

.chatinp{
高度：10px；
宽度：100%；
位置：绝对位置；
溢出：隐藏；
底部：0；
右：0；
尺寸：固定；
高度：自动；
边框顶部：实心；
显示器：flex
}
#聊天{
字体系列：monospace；
字体大小：20px；
位置：相对位置；
底部：0；
左：0；
身高：100%；
背景：无；
边框：实心1px#fff；
颜色：白色；
弹性：9；
}
#发送{
字体系列：monospace；
字体大小：20px；
位置：相对位置；
底部：0；
右：0；
身高：100%；
背景色：#090；
边框：实心1px#fff；
颜色：白色；
填充：无；
保证金：无；
弹性：1；
}

邮寄

既然您正在使用flexbox，请尽量充分利用它。对于

chatinp

类，使用

display:flex

；对于

#CHAT

使用

flex:1

如果需要，为

#SEND

.chatinp{
宽度：100%；
位置：绝对位置；
溢出：隐藏；
底部：0；
右：0；
边框顶部：实心；
显示器：flex；
}
#聊天{
字体系列：monospace；
字体大小：20px；
/*位置：相对位置*/
/*底部：0*/
左：0；
身高：100%；
/*宽度：95%*/
背景：无；
边框：实心1px#fff；
填充：无；
保证金：无；
弹性：1；
}
#发送{
字体系列：monospace；
字体大小：20px；
/*位置：相对位置*/
/*底部：0*/
/*右：0*/
/*身高：100%*/
/*宽度：10%*/
背景色：#090；
边框：实心1px#fff；
填充：无；
保证金：无；
}

邮寄

既然您正在使用flexbox，请尽量充分利用它。对于

chatinp

类，使用

display:flex

；对于

#CHAT

使用

flex:1

如果需要，为

#SEND

.chatinp{
宽度：100%；
位置：绝对位置；
溢出：隐藏；
底部：0；
右：0；
边框顶部：实心；
显示器：flex；
}
#聊天{
字体系列：monospace；
字体大小：20px；
/*位置：相对位置*/
/*底部：0*/
左：0；
身高：100%；
/*宽度：95%*/
背景：无；
边框：实心1px#fff；
填充：无；
保证金：无；
弹性：1；
}
#发送{
字体系列：monospace；
字体大小：20px；
/*位置：相对位置*/
/*底部：0*/
/*右：0*/
/*身高：100%*/
/*宽度：10%*/
背景色：#090；
边框：实心1px#fff；
填充：无；
保证金：无；
}

邮寄

我更喜欢使用

网格

，您可以在其中指定要在一行中放置多少部分和元素数量

div{
显示：网格；
网格模板列：80vw auto；/*auto auto，如果您不需要任何特定的项目空间*/
}

邮寄

我更喜欢使用

网格

，您可以在其中指定要在一行中放置多少部分和元素数量

div{
显示：网格；
网格模板列：80vw auto；/*auto auto，如果您不需要任何特定的项目空间*/
}

邮寄

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

• （下面的例子）
  • 将在旧浏览器上运行
  • 没有

    .chatinp {
      display: flex;
    }
    
    #CHAT {
      height: auto;
    }