Html 即使页面宽度较小，如何将按钮附加到输入中？

我试图在文本输入中添加一个按钮

当我处于桌面模式时，它可以工作，但当您将大小更改为移动查看大小时，按钮将与输入分离

在这里

我正在使用purecss：

输入{
字体大小：16px；
右边填充：50px；
边界半径：0px；
高度：30px；
}
.纯按钮{
左边距：-45px；
高度：30px；
宽度：40px；
填充：1px；
}
跨度{
光标：指针；
显示：内联块；
高度：11px；
宽度：8px；
文本对齐：居中；
空白：nowrap；
自我校准：灵活启动；
背景：红色；
背景位置：0；
保证金：1px；
}

---

您正在使用的库正在向媒体查询中的

输入添加
display:block
。这迫使按钮转到下一行


将此添加到CSS中：

input, button { 
    display: inline-block !important;
    margin: 0 !important;
}

！重要信息
需要重写PURECSS代码。否则，请更改源代码中的代码

我还删除了代码中元素之间的所有空白：

<input type="text" class="pure-input-1-2" /><button type="submit" class="pure-button pure-button-primary"><span></span></button>



这是解决问题的一种方法

您正在使用的库正在媒体查询中向
输入添加
display:block
。这迫使按钮转到下一行


将此添加到CSS中：

input, button { 
    display: inline-block !important;
    margin: 0 !important;
}

！重要信息
需要重写PURECSS代码。否则，请更改源代码中的代码

我还删除了代码中元素之间的所有空白：

<input type="text" class="pure-input-1-2" /><button type="submit" class="pure-button pure-button-primary"><span></span></button>



这是解决问题的一种方法

有一个媒体查询正在将tules应用于0px-480px的
输入
和
按钮
。如果删除或覆盖这些字段，则字段的行为方式将与>480px屏幕宽度相同。
有一个媒体查询正在将tules应用于
输入
和来自0px-480px的
按钮。如果删除或覆盖这些字段，则字段的行为将与>480px屏幕宽度相同。
请在现有代码中尝试以下代码，希望这对您有所帮助


.pure表单字段集{
位置：相对位置；
宽度：50%；
填充：0 45px 0；
利润率：10px；
框大小：边框框；
}
输入{
字体大小：16px；
边界半径：0px；
高度：30px；
}
.纯形式.纯输入-1-2{
宽度：100%；
}
.纯按钮{
位置：绝对位置；
右：0；
排名：0；
高度：30px；
宽度：40px；
填充：1px；
边距：0！重要；
}
跨度{
光标：指针；
显示：内联块；
高度：11px；
宽度：8px；
文本对齐：居中；
空白：nowrap；
自我校准：灵活启动；
背景：红色；
背景位置：0；
保证金：1px；
}
请在现有代码中尝试以下代码，希望这对您有所帮助


.pure表单字段集{
位置：相对位置；
宽度：50%；
填充：0 45px 0；
利润率：10px；
框大小：边框框；
}
输入{
字体大小：16px；
边界半径：0px；
高度：30px；
}
.纯形式.纯输入-1-2{
宽度：100%；
}
.纯按钮{
位置：绝对位置；
右：0；
排名：0；
高度：30px；
宽度：40px；
填充：1px；
边距：0！重要；
}
跨度{
光标：指针；
显示：内联块；
高度：11px；
宽度：8px；
文本对齐：居中；
空白：nowrap；
自我校准：灵活启动；
背景：红色；
背景位置：0；
保证金：1px；
}

我建议重新考虑您的设计策略。如果你输入一个长单词，它会在按钮后面。将按钮放在输入旁边，而不是上面。@LazarLjubenović我为输入按钮添加了“padding right:50px”……即使这样，它也会断开？我建议重新考虑您的设计策略。如果你输入一个长单词，它会在按钮后面。将按钮放在输入旁边，而不是上面。@LazarLjubenović我为输入按钮添加了“padding right:50px”……即使这样它也会断开？如果我将其更改为“pure-input-1”而不是“pure-input-1-2”，那么它就会断开：因为
pure-input-1
有一条规则说
宽度：100%
，迫使输入占据整行。你也可以覆盖它。嗯…在小提琴演示中它还是坏掉了？不要在这里破门而入。。。此外，您正在使用一个库，该库将大量代码应用于您的元素。进入inspector（Chrome上的F12）查看正在应用的CSS，以便您可以根据需要添加、删除和调整样式。如果我将其更改为“pure-input-1”而不是“pure-input-1-2”，则它会中断：因为
pure-input-1
有一条规则说
宽度：100%
，强制输入占据整行。你也可以覆盖它。嗯…在小提琴演示中它还是坏掉了？不要在这里破门而入。。。此外，您正在使用一个库，该库将大量代码应用于您的元素。进入inspector（Chrome上的F12）查看正在应用的CSS，以便根据需要添加、删除和调整样式。这似乎可行，但为什么“padding right:50px；”没有得到尊重？这似乎有效，但为什么“填充正确：50px；”不被尊重？