当输入框宽度为 %100 时，按钮在 div 内被按下答案

【问题标题】：Button is pushed down inside div when input box is %100 width当输入框宽度为 %100 时，按钮在 div 内被按下
【发布时间】：2016-03-23 00:01:30
【问题描述】：

当我要求输入文本框填充我的 div 内的其余宽度时，我的按钮似乎在我的 div 内被按下。在尝试使用输入填充 div 的剩余宽度时，如何在输入旁边整齐地获取按钮？

我附上了问题的快速图片（左）和所需的结果（右）：

这是 HTML 标记：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div style="border: 1px solid red; width: 200px;">
      <input type="text" style="box-sizing: border-box; width: 100%; border: 0;"><input type="button" value="x"/>
    </div>
  </body>
</html>

【问题讨论】：

“当我要求输入文本框填充其余的宽度时”——这不是你在做什么。 100% 不是“休息”的意思，而是 100% 的意思。 // Flexbox 很好地解决了这样的问题。

标签： html css

【解决方案1】：

有很多方法可以解决这个问题。但一种方法是使用 flexbox。将display: flex; 添加到您的外部 div。

<div style="border: 1px solid red; width: 200px; display: flex;">
        <input type="text" style="box-sizing: border-box; width: 100%; border: 0;"><input type="button" value="x">
    </div>

JSFiddle

【讨论】：

【解决方案2】：

它不是很灵活，但是很有效

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div style="border: 1px solid red; width: 200px;">
      <input type="text" style="box-sizing: border-box; width: 175px; border: 0;"><input type="button" value="x" style="width:25px"/>
    </div>
  </body>
</html>

【讨论】：