像典型的表格设计一样布置字段集元素

如何解决像典型的表格设计一样布置字段集元素

| 我正在尝试以典型表格的外观排列3个字段集元素的标题，但我无法按照我想要的方式获得它。这非常接近，但是...

<label style=\"vertical-align:top;\">Title1</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" />
</fieldset>

<label style=\"vertical-align:top;\">Title2</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
<input value=\"Lorem Ipsum\" />
</fieldset>

<label style=\"vertical-align:top;\">Title3</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
Lorem Ipsum
</fieldset>

如果没有必要在我的PHP代码中为title和fieldset元素运行if语句，我可能会使用表。另外，就漂亮的代码而言，将fieldset用于我在这里所做的事情似乎是更好的选择。 对上述代码有任何建议吗？ 澄清：http：//anony.ws/di-FJKD.jpg     

解决方法

        您可以做的是从流中删除

label

，以免它们与输入/文本垂直对齐。通过绝对放置它们来进行此操作。这将需要一个父元素在其上具有

position: relative;

-我认为上面的总体代码在3英镑以内，但是为了演示起见，我只是将所有代码包装在div中。 工作实例 HTML：

<div id=\"form\"> 

  <label>Title1</label>
  <fieldset>
    <input value=\"Lorem Ipsum\" /><br />
    <input value=\"Lorem Ipsum\" /><br />
    <input value=\"Lorem Ipsum\" />
  </fieldset>

  <label>Title2</label>
  <fieldset>
    <input value=\"Lorem Ipsum\" />
  </fieldset>

  <label>Title3</label>
  <fieldset>
  Lorem Ipsum
  </fieldset>

</div>

CSS：

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  padding-top: 30px; /* leave a space to position for the labels */
}

fieldset {display: inline-block; vertical-align: middle;}
fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */}

label {
   position: absolute; 
   top: 5px; 
   left: auto; 
   margin-left: 5px; 
   font-weight: bold;
}

每个评论添加 因为注释中没有足够的空间，所以这是我在考虑的代码，该代码没有将ѭ1定位，要做到这一点，

label

需要放入垂直对齐的字段集中

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {display: inline-block; vertical-align: middle; background: #eee;}
fieldset {display: inline !ie7;}


label {
   display: block;
   font-weight: bold;
}

HTML：

<fieldset>
  <label>Title1</label>
  <input value=\"Lorem Ipsum\" /><br />
  <input value=\"Lorem Ipsum\" /><br />
  <input value=\"Lorem Ipsum\" />
</fieldset>


<fieldset>
  <label>Title2</label>
  <input value=\"Lorem Ipsum\" />
</fieldset>


<fieldset>
  <label>Title3</label>
  Lorem Ipsum
</fieldset>

    ,        像这样

    .divTable {
      display: table;
      width: 50%;
    }
    .divRow {
      display: table-row;
    }
    .cellOne,.cellTwo {
      display: table-cell;
      padding: 20px;
      width: 30%;
    }

<fieldset id=\"fileConnSet\">
  <legend>File:</legend>
  <div class=\"divTable\">
    <!--Table start-->
    <div class=\"divRow\">
      <!--1st row,like <tr>-->
      <div class=\"cellOne\">
        <!--1st column,like <td>-->
        <label>Name:</label>
      </div>
      <div class=\"cellTwo\">
        <!--2nd column-->
        <input type=\"text\" />
      </div>
    </div>

    <div class=\"divRow\">
      <!--2nd row,like <tr>-->
      <div class=\"cellOne\">
        <label>Age:</label>
      </div>
      <div class=\"cellTwo\">
        <input type=\"text\" />
      </div>
    </div>

    <div class=\"divRow\">
      <!--3rd row,like <tr>-->
      <div class=\"cellOne\">
        <label>Company:</label>
      </div>
      <div class=\"cellTwo\">
        <input type=\"text\" />
      </div>
    </div>
  </div>
  <!--Table end-->
</fieldset>