如何在CSS中并排获取两个表单字段，每个字段的标签位于字段上方？ [英] How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

问题描述

我坚持找出一些CSS，我需要一个表单的部分看起来像下面的

I am stuck on figuring out some css, I need a section of my form to look like the following,

我试过了每一种变化，我想到的，

I have tried every variation I can think of,

我给这些标签一个固定的宽度，并将它们左移，然后给予输入相同的宽度，并将它们留下。

I have given the labels a fixed width and floated them left, then given the inputs the same width and floated them left.

推荐答案

<form>
  <label for="company">
    <span>Company Name</span>
    <input type="text" id="company" />
  </label>
  <label for="contact">
    <span>Contact Name</span>
    <input type="text" id="contact" />
  </label>
</form>

label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }

< nofollow> http://jsfiddle.net/H3y8j/

这篇关于如何在CSS中并排获取两个表单字段，每个字段的标签位于字段上方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！