我在寻找最有效的方式，以codea的相当简单的HTML表单的布局我做的样机。

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

到目前为止，我已经想到了一些方法来code这一点，但他们似乎都实现时相当麻烦。

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.

推荐答案

下面是一种方法，但我认为你可以帮助自己一个很大的越多，通过显示previous尝试，并解释你有问题。但是：

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(https://m.xsw88.com/allimgs/daicuo/20230911/3387.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：

With the 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小提琴演示。