Question

当我要求输入文本框填充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>

Answer 1

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

＆＃13;

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

＆＃13;

JSFiddle

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

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

2 个答案: