使表单和按钮在同一行答案

【问题标题】：make the form and button on the same line使表单和按钮在同一行
【发布时间】：2013-07-10 15:29:56
【问题描述】：

我想在按钮的同一行创建文本字段，但不成功。

需要一些帮助。

HTML

<form id="newsletter_form">
    <input type="text" placeholder="Enter you mail here ..." /><input type="image" src="images/go_button.jpg" />
</form>

CSS

#newsletter_form
{
    display:inline;
    vertical-align:top;
    text-align:center;
}
#newsletter_form input[type="text"]
{
    margin: 0;
}

演示

http://jsfiddle.net/yokosatan/GbtZy/

【问题讨论】：

标签： html css forms button

【解决方案1】：

像这样尝试..

<form id="newsletter_form">
    <table>
        <tr>
            <td valign="top">
                <input type="text" placeholder="Enter you mail here ..." />
            </td>
            <td valign="top">
                <input type="image" src="images/go_button.jpg" />
            </td>
        </tr>
    </table>
    </form>

或者像这样编辑你的CSS

 #newsletter_form input[type="text"]
        {
            vertical-align: top;
        }

您需要为垂直对齐工作定义输入类型

【讨论】：

【解决方案2】：

您应该选择您的输入元素并提供vertical-align: middle; 以正确显示。

#newsletter_form input
{
    margin: 0;
    vertical-align: middle;
}

demo

【讨论】：

【解决方案3】：

只需将第一个输入浮动到左侧：

标记

<form id="newsletter_form">
     <input type="text" class="lefty" placeholder="Enter you mail here ..." />
     <input type="image" class="clear" src="http://s21.postimg.org/n786rdtfn/go_button.jpg" />
</form>

CSS

.lefty {
    float: left;
}

.clear {
    clear:both;
}

http://jsfiddle.net/GbtZy/3/

值得一读浮点数以及如何理解它们。用完后一定要清楚，不然其他的东西会有点乱。

Floats CSS

【讨论】：

【解决方案4】：

定义你的input[type="text"] vertical-align:top

像这样

#newsletter_form input[type="text"] {
vertical-align: top;
}

Demo

【讨论】：