创建表单以使字段和文本彼此相邻 - 什么是语义方式？ [英] Creating form to have fields and text next to each other - what is the semantic way to do it?

问题描述

我想创建一个表单，以便左侧有文本，右侧有输入，我现在正在做

I want to create a form so there is text on the left side and the inputs on the right, currently I am doing

<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>

<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>

和CSS

input[type=text] {
    height: 14px;
}

#labels {
    float: left;
}

#inputs {
    float: right;
}

li {
    padding-top: 4px;
    padding-left: 10px;
}

// Text size is 14px

我认为这是因为不是所有的输入都可以是14px（我使用下拉，复选框，无线电等）。

What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).

创建这个的正确方法是什么？我知道一个表会修复这个问题，但是是语义的。

What would be the correct way to create this? I know a table would fix the problem but is that semantic?

推荐答案

这种问题在这里被多次提出，你可以做一个简单的搜索并找到很多解决方案。

This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.

简单的形式让你开始：

HTML

<form>
    <div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Company</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="nselect">Dropdown Menu</label>
        <div class="input">
            <select name="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="line">
        <label for="input">Text 1</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 2</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 3</label>
        <div class="input">
            <input type="text" size="15" name="input">
        </div>
    </div>
</form>

CSS

form {
    margin:10px 0;
}

label {
    color: #404040;
    float: left;
    font-size: 13px;
    line-height: 18px;
    padding-top: 6px;
    text-align: right;
    width: 130px;
}

label, input, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
}

input, textarea, select {
    -moz-border-radius: 3px 3px 3px 3px;
    border: 1px solid #CCCCCC;
    color: #808080;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    padding: 4px;
    width: 210px;
}

select {
    height: 27px;
    line-height: 27px;
}

form .input {
    margin-left: 150px;
}

form .line {
    margin-bottom: 18px;
}

这是一个演示： http://jsfiddle.net/5aduZ/1/

很多人不会同意我使用divs来分隔表单元素，但通过测试我发现这种格式是最安全和肯定的方式去，因为它分离的字段干净，它的工作原理在IE下很好。另外，它是大男孩（facebook，twitter，谷歌）使用的格式。

A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).

这篇关于创建表单以使字段和文本彼此相邻 - 什么是语义方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！