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

发布于 2024-09-30 11:04:36 字数 1267 浏览 1 评论 0原文

作为最后的努力，我要求遵守我的良心并使用 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

原文

I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.

I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?

alt text

EDIT: Adding my CSS to see where I'm going wrong.

Here's as far as I got with the 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;
}

The Markup:

<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>

And the result:

alt text

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉服软 2024-10-07 11:04:36

你诱惑我接受挑战:) 我使用 CSS 在 10 分钟内就完成了。

只要您同意调整某些元素的 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>

You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.

As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.

Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.

Have a look at this: http://jsbin.com/osibu3/4

Tested in IE6+, FF3.6+, Chrome, Safari

Pasting for reference as well:

<!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>

回复收藏 0 原文