html - 定位文本输入？

Question

我没有经常使用表格，所以我不确定这里发生了什么。我试图将文本输入与按钮内联，但它似乎不起作用。你可以在这里看到我在做什么：http: //jsfiddle.net/gagalug/BEBAH/

谢谢。

Answer 1

添加

input { vertical-align: middle; }

Answer 2

将此行添加到您的样式中：

img, input[type=image] {vertical-align: bottom;}

这将防止图像和图像输入的基线问题。即刻解决您的问题。

你知道，更多的人真的应该知道这件事。即使是编写像 QuirksMode 这样大的网站的人也不知道这个事实。

Answer 3

有多种方式。

1. 相对于父 div 的定位和相对于子级的绝对定位。

2. 垂直对齐：中间；对于两个输入

Answer 4

嘿，我想你想要这个

选项您只需定义您的 垂直对齐：顶部；

#text{
    height: 40px;
    vertical-align: top;

}

现场演示http://jsfiddle.net/BEBAH/4/

Answer 5

如下修改您的 CSS。

div{
        border: 1px solid black;
        width: 500px;
        height: 50px;
        float:left;
    }
    #text{
        height: 40px;
        top: 0px;
        float:left;
    }