html - 带有附加按钮的文本字段

Question

如何让文本字段和按钮相互连接

这是我的演示 http://jsfiddle.net/dgWqL/2/

Answer 1

您可以简单地删除 和 之间的#textfield"空格input[type="button"]。（什么？）嗯，这是你的 html：

    <input type="text" name="textfield" id="textfield" value="Search here" />
    <input name="" type="button" value="Go">

这与拥有...

    abc
    def

...正如您永远不会质疑的那样，它被渲染为abc def.

这是完全相同的事情。

正如我所建议的那样，您可以通过将第二个输入放在 html 中第一个输入的前面来简单地删除该空格，因此...

    <input type="text" name="textfield" id="textfield" value="Search here" /><input name="" type="button" value="Go">

另一种选择是注释掉空格 - 如果您希望将每个输入放在自己的行上：

    <input type="text" name="textfield" id="textfield" value="Search here" /><!--
  --><input name="" type="button" value="Go">

这是一个小提琴 - http://jsfiddle.net/dgWqL/3/

Answer 2

你可以这样做：http: //jsfiddle.net/dgWqL/2/
关键是使用float

建议：

1. 不要使用表格进行布局。（这是不好的做法。）

2. 将您的 CSS 属性写在单独的行上。（更容易阅读）并且更容易
   避免重复，就像你做的那样display: inline-block;

希望这有帮助。