与 <input type="radio>> 一起使用的良好 HTML 和 CSS?
在 HTML 中使用 <input type="radio"> 的最佳方式是什么?
What's the best way to use <input type="radio"> in HTML?
我正在寻找语义良好的 HTML，其格式可通过 CSS 配置.
I'm looking for HTML that's semantically good, whose formatting is configurable via CSS.
我希望能够对其进行样式/渲染，使其看起来像:
I want to be able to style/render it to look something like:
Car: (o) Yes
(X) No
(o) Maybe
Train: (o) Yes
(o) No
(X) Maybe
Address: [An input text box ]
考虑到 CSS，我想我希望左侧的标签(例如汽车"和公共汽车")位于某种 text-align: right 块中?
Thinking of the CSS, I think that I'd like the labels on the left (e.g. "Car" and "Bus") to be in some kind of text-align: right block?
我不知道右边的单选按钮:在某种 <span> 中，也许是 "display: inline-block"?还是 "white-space: pre"?
I don't know about the radio buttons on the right: in some kind of <span> perhaps, with "display: inline-block"? Or "white-space: pre"?
什么样的块级标签(例如 <p> 或 <div>)和/或其他标签(例如 或 <br/>) 你会推荐吗?
What kind of block-level tags (e.g. <p> or <div>) and/or other tags (e.g. <span> or <br/>) would you recommend?
下面的怎么样.
HTML 使用 <legend>，就像 HTML 应该和 alistapart 文章:
HTML uses <legend>, like HTML is supposed to and as recommended in the alistapart article:
<fieldset>
<legend>Car</legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>
为了让 Firefox 更容易访问/定位 <legend> 的内容，请将其放在 <span> 中:
To make it easer for Firefox to access/position the contents of the <legend>, place it within a <span>:
<fieldset>
<legend><span>Car</span></legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>
然后，使用 Legends of样式已修改以将 span 的内容定位到字段集的左侧.
Then, use the browser-specific CSS described in Legends of Style Revised to position the contents of the span to left of the fieldset.
CSS 真的必须如此复杂和特定于浏览器吗?理论上应该可以工作的最简单的 CSS 是什么，而不是在那些不完美的浏览器上实际工作所需的更复杂的 CSS?如果 <legend> 很难定位，那么有什么好的(语义)替代方案?
Does the CSS really have to be so complicated and browser-specific? What's the simplest CSS which ought theoretically to work, instead of the more-complicated CSS required to actually work with those imperfect browsers? If <legend> is hard to position then what's a good (semantic) alternative?
推荐答案
我将使用 .
<label> 在不同浏览器中定位的困难在Legends of Style Revised" 文章；因此，与其使用 <label> 并尝试定位它，我可能会在 <字段集>.
The difficulty with positioning a <label> in different browsers is described in the "Legends of Style Revised" article; so instead of using a <label> and trying to position it, I might use a <span class="label"> outside the <fieldset>.
相关文章