Question

我要求做出最后的努力来遵守我的良心并用CSS做到这一点。我想使用CSS来布局这个简单的表单，但我花了两个小时试图获得它并且总是最终出现对齐问题。我用十分钟就用它做了。

我需要右对齐的标签，名称行分为两部分，标签与输入文本正确垂直对齐，以及输入的所有右边缘排成一行。在CSS中做什么需要做什么？

alt text

编辑：添加我的CSS，看看我哪里出错了。

就我用CSS而言：

.form_row {
    width: 500px;
}
.form_row label {
    text-align: right;
    width: 150px;
    float: left;
    margin-top: 6px;
    padding-right: 6px;
}
#id_first_name, #id_last_name {
    width: 130px;
}
#id_email, #id_password {
    width: 300px;
}

标记：

<div class="form_row">
    <label for="id_first_name">Name:</label>
    <input id="id_first_name" type="text" name="first_name" />
    <input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
    <label for="id_email">Email:</label>
    <input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
    <label for="id_password">Password:</label>
    <input id="id_password" type="password" name="password" />
</div>

结果：

alt text

Answer 1

你诱惑我接受挑战:)我只是在10分钟内用CSS做了。

只要您对某些元素调整line-height和px中的设置维度感到满意，我认为这是可以实现的。

需要注意的其他事项包括font-size，padding和line-height如何影响文本框及其尺寸。

看看这个：http://jsbin.com/osibu3/4

在IE6 +，FF3.6 +，Chrome，Safari

中测试

粘贴参考：

<!doctype html>
<html>
<head>
  <title></title>
  <style type="text/css">
    html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
    body { font:normal 62.5% lucida grande, lucida sans unicode }
    #my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
    #my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
    #my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
    input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
      border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
    .text.long { width:395px }
    .text.short { width:193px }
  </style>
</head>
<body>
  <form action="" id="my-form">
    <fieldset class="name">
      <label for="first"><strong>Name:</strong></label>
      <input type="text" name="first" value="first" class="text short"/>
      <input type="text"  name="last" value="last" class="text short"/>
    </fieldset>
    <fieldset>
      <label for="email"><strong>Email:</strong></label>
      <input type="text" name="email" class="text long"/>
    </fieldset>
    <fieldset>
      <label for="password"><strong>Password:</strong></label>
      <input type="text" name="password" class="text long"/>
    </fieldset>
  </form>
</body>
</html>

Answer 2

http://www.blueprintcss.org/

蓝图css框架可以帮助您使用div进行表格布局。它具有简单的用法和良好的文档。

很难在你的问题中用这么少的信息给出另一个答案。

如何使用纯CSS对表单中的标签和字段进行样式设置并获得正确的对齐？

2 个答案: