如何单独对齐Web窗体文本和输入？ [英] How to Align Web Form Text and Inputs Separately?

问题描述

我正在寻找最有效的方式来编码一个相当简单的html表单布局我做了一个模型。

I'm looking for the most efficient way to code a fairly simple html form layout I've done a mockup of.

到目前为止，我想到有很多方法来编写代码，但是在实现时它们看起来都很繁琐。

So far I've thought of a number of ways to code this but they all seem rather cumbersome when implemented.

基本上我想要实现的是纯文本，输入在左边对齐，在两边的中心都有一条线。下面是一个应该给出我想要实现的示例的图片。

Basically what I'm trying to put into action is plain text aligned to the right and form imputes aligned to the left with a line in the center of both. Below is an image that should give an example of what I'm trying to achieve.

推荐答案

这里有一种方法，但我认为你可以帮助自己更多，通过显示以前的尝试和解释你有的问题。但是：

Here's one approach, though I think you could have helped yourself a great deal more, by showing previous attempts and explaining problems you had. However:

form {
    width: 80%;
    max-width: 40em;
    margin: 0 auto;
    color: #3f3a27;
    background: #f4f0e5 url(http://davidrhysthomas.co.uk/linked/test.png) 35% 0 repeat-y;
    padding: 0.5em;
}

label, input[type=text], select {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -box-sizing: border-box;
    margin-bottom: 0.6em;    
}

label {
    width: 30%;
    text-align: right;
    margin: 0 10% 0 0;
}

label:after {
    content: ': ';
}

input[type=text] {
    width: 40%;
}

select {
    width: 20%;
}

fieldset {
    margin: 0 0 1em 0;
}

使用HTML：

<form action="#" method="post">
    <fieldset>
        <label for="fullName">Full name</label>
        <input type="text" id="fullName" />
        <label for="companyName">Company</label>
        <input type="text" id="companyName" />
    </fieldset>
    <fieldset>
        <label for="select">Select</label>
        <select id="select" name="select">
            <option>Option one</option>
            <option>Option two</option>
        </select>
        <label for="t1">Text input 1</label>
        <input id="t1" type="text" />
        <label for="t2">Text input 1</label>
        <input id="t2" type="text" />
        <label for="t3">Text input 1</label>
        <input id="t3" type="text" />
    </fieldset>
</form>

JS Fiddle demo 。

这篇关于如何单独对齐Web窗体文本和输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！