像典型的表格设计一样布置字段集元素 [英] Arranging fieldset elements like a typical table-design

问题描述

我试图安排3个字段集元素的标题，就像一个典型的表看起来一样，但我不能得到它的方式我想要的。

I'm trying to arrange the titles for 3 fieldset elements the same way a typical table looks, but I can't get it the way I want. This comes pretty close, however...

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

我可能会使用表，如果有一种方式，我不必运行一个if语句在我的PHP代码中的title和fieldset元素。另外，使用fieldset为我在这里做的似乎是一个更好的选择，在漂亮的代码。

I may've used tables if there was a way I didn't have to run an if statement in my PHP code for both the title and the fieldset element. Plus, using fieldset for what I'm doing here seems to be a better alternative, in terms of pretty code.

有什么类似的代码上面的任何建议吗？
说明： http://anony.ws/di-FJKD.jpg p>

Got any suggestions for anything similar to the code above? Clarification: http://anony.ws/di-FJKD.jpg

推荐答案

你可以做的是从流中删除标签它们不会与输入/文本垂直对齐..通过绝对定位它们这样做。这将需要一个父元素 position：relative; 就可以了 - 我假设上面的整个代码是在一个表单元素，但为了一个演示我已经把所有的代码放在一个div。

what you could do is remove the label's from the flow so they don't get vertically aligned with the inputs/text.. do this by absolutely positioning them.. this will require a parent element to have position: relative; on it - I presume the overall code above is in a form element but for the sake a demo I've just wrapped all your code in a 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;
}

---

/ strong>每个评论

---

added per comments

因为评论中没有足够的空间，以下是我认为不会定位标签的代码，这样标签需要进入垂直对齐的字段集

because there's not enough room in comments, here's the code I was thinking which doesn't position the label, to do this the label would need to go inside the vertically aligned fieldset

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

这篇关于像典型的表格设计一样布置字段集元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！