在 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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!