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

<强> Demo

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/

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

Floats CSS

Answer 3

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

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

demo

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

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

使表单和按钮在同一行

4 个答案: