与 <input type="radio>> 一起使用的良好 HTML 和 CSS? [英] Good HTML and CSS to use with <input type="radio">?

问题描述

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

这篇关于与 <input type="radio>> 一起使用的良好 HTML 和 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！