如何对齐多个表单元素？

问题描述

我在设计上没有线索，我试图得到一个简单的HTML表单，如下所示：
。

I've no clue at design, and I'm trying to get a simple HTML form to look like this:.

基本上，它是一个包含三个输入字段和

Basically, it's a form with three input fields and one submit button.

关于输入字段，在顶部有两个 我希望这些完全中心对齐，第二个伸展到与上面的宽度相同。

Regarding the input fields, there are two on top and one below. I'd like these to be perfectly centre-aligned with each other and the second one to stretch to be the same width as the ones above.

关于提交按钮，我希望它与水平和垂直，与输入字段完全中心对齐，但是在这些的右边。

Regarding the submit button, I'd like it to be perfectly center-aligned, both horizontally and vertically, with the input fields, but be to the right of these.

我不是

感谢您任何指针！

Thanks for any pointers!

编辑：我宁愿如果使用CSS而不是基于表。 （我听说基于表的只是简单的邪恶。）

Edit: I'd prefer if it were done with CSS rather than be table-based. (I hear table-based is just plain evil.)

推荐答案

顺便说一句...你知道关于你的输入字段和搜索按钮的具体维度吗？如果我知道一些维度，我可以做一个更干净。无论如何，请查看演示...

How about something like this with pure CSS? By the way... do you know specific dimensions regarding your input fields and the search button? I could probably do this a little cleaner if I knew some dimensions. Anyway, check out the demo...

<div id="wrap">
    <div id="fields">
        <input type="text" id="left" />
        <input type="text" id="right" />
        <div class="clear"></div>
        <input type="text" id="bottom" />
    </div>
    <input type="button" value="Search" id="search-button" />
</div>

CSS

CSS

#wrap {
    min-width: 375px;
    position: relative;
}
#fields {
    float: left;
    position: relative;
}
#left {
    height: 15px;
    width: 150px;
    float: left;
    position: relative;
}
#right {
    height: 15px;
    width: 150px;
    margin-left: 5px;
    float: left;
    position: relative;
}
#bottom {
    height: 15px;
    width:309px;
    margin-top: 5px;
    position: relative;
}
#search-button {
    position: relative;
    left: 15px;
    top: 12px;
}
.clear {
    clear: both;
}

我希望这有帮助。

这篇关于如何对齐多个表单元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！