html - 使表单和按钮在同一行

Question

我想在按钮的同一行上制作文本字段，但不成功。

需要一些帮助。

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/

Answer 1

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

像这样

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

演示

Answer 2

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

标记

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

值得一读浮点数以及如何理解它们。使用后清除很重要，否则其他事情会变得有些混乱。

浮动 CSS

Answer 3

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

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

演示

Answer 4

试试这样。。

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

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