与 一起使用的 HTML 和 CSS 是否良好？

Question

在 HTML 中使用 的最佳方式是什么？

我正在寻找语义良好的 HTML，其格式可通过 CSS 配置。

我希望能够对其进行样式/渲染，使其看起来像这样：

    Car: (o) Yes
         (X) No
         (o) Maybe

  Train: (o) Yes
         (o) No
         (X) Maybe

Address: [An input text box     ]

考虑到 CSS，我认为我希望左侧的标签（例如“汽车”和“巴士”）采用某种 text-align: right 块？

我不知道右侧的单选按钮：也许是某种 ，带有 "display: inline-block"？或者“空白：pre”？

什么样的块级标签（例如

或

）和/或其他标签（例如 > 或
) 您会推荐吗？

---

编辑：

以下怎么样。

HTML 使用

，就像 HTML 应该使用的那样，并且按照 中的建议alistapart 文章：

<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 更轻松地访问/定位

的内容，请将其放在 中：

<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 Style Revished 将范围的内容定位到字段集的左侧。

CSS 真的必须如此复杂并且特定于浏览器吗？理论上应该可以工作的最简单的 CSS 是什么，而不是实际与那些不完美的浏览器一起工作所需的更复杂的 CSS？如果

很难定位，那么什么是好的（语义）替代方案？

Answer 1

这就是我通常使用单选按钮和复选框所做的事情。它允许在大多数浏览器中单击关联的文本，而无需执行任何操作，这使得表单更易于使用。 CSS cursor 更改有助于提醒用户此功能。

CSS

label { cursor: pointer; }

HTML

<label><input type="radio" name="option" value="yes"> Yes</label>
<label><input type="radio" name="option" value="no"> No</label>
<label><input type="radio" name="option" value="maybe"> Maybe</label>

或者，对汽车使用 fieldset 图例，对单选按钮列表使用 ul：

<fieldset>
    <legend>Cars</legend>
    <ul class="radio-list">
        <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
        <li><label><input type="radio" name="option" value="no"> No</label></li>
        <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
    </ul>
<fieldset>

CSS

.radio-list li { list-style: none; }

Stylizing a fieldset/legend 跨浏览器保持一致并不是太困难；但是，如果您想要图例周围有边框，则需要一个 IE 条件。唯一需要的额外 HTML 是 legend 中的包装器 span。

CSS

<style>
    fieldset {
        position: relative;
        border: 1px solid #000;
        background: #f8f8f8;
        padding: 1.6em 10px 0px;
        margin: 0;
    }
    legend {
        position: absolute;
        font-weight: bold;
        font-size: 1.2em;
    }
    legend span {
        position: absolute;
        top: -1.1em;
        white-space: nowrap;
    }

    /* This isn't necessary, just here for list aesthetics */
    ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
</style>

<!--[if IE]>
    <style>
    legend {
        border-bottom: 1px solid #000;
    }
    </style>
<![endif]-->

HTML

<fieldset>
    <legend><span>Did you enjoy your SO experience?</span></legend>
    <form>
        <ul>
            <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
            <li><label><input type="radio" name="option" value="no"> No</label></li>
            <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
        </ul>
    </form>
</fieldset>

这就是我所能理解的最简单的了。 实例

Answer 2

嗯...... Car 和 Train 绝对应该是 。查看这篇经典的 A List Apart 文章，了解一个非常好的示例： Prettier Accessible Forms

单选按钮标签：好问题！我会再次说 ，但 也可以。

Answer 3

css：（需要更改丑陋的类名）

p.radio { height: 4em; }
label.top {
  display: block;
  width: 4em; /* or something else */
  float: left;
  text-align: right;
  padding-right: 1em;
  height: 4em;
}

html：

<p class="radio">
  <label class="top" for="car">Car:</label>
  <input type="radio" value="yes" name="car" id="car_y" />
  <label for="car_y">Yes</label><br />
  <input type="radio" value="no" name="car" id="car_n" />
  <label for="car_n">No</label><br />
  <input type="radio" value="maybe" name="car" id="car_m" />
  <label for="car_m">Maybe</label><br />
</p>

编辑：没有看到其他答案。在我看来，使用字段集而不是“顶级”标签的段落和图例似乎是一个好主意。

EDIT2：根据评论，我同意，在这里使用列表会更干净。新版本将是：

css:

fieldset {
  border: 0;
  padding: 0;
}
legend {
  padding: 0 0.5em 0 0;
  margin: 0;
  display: block;
  width: 3.5em;
  float: left;
  text-align: right;
}
ul {
  margin: 0;
  padding: 0 0 0 4em;
}
ul li {
  list-style-type: none;
  list-style-position: outer;
}

html:

<fieldset>
  <legend>Car:</legend>
  <ul>
    <li>
      <input type="radio" value="yes" name="car" id="car_y" />
      <label for="car_y">Yes</label>
    </li>
    <li>
      <input type="radio" value="no" name="car" id="car_n" />
      <label for="car_n">No</label>
    </li>
    <li>
      <input type="radio" value="maybe" name="car" id="car_m" />
      <label for="car_m">Maybe</label>
    </li>
  </ul>
</fieldset>

这会更加优雅。但即使使用 display:block firefox 似乎也不想设置 legend 元素的宽度。奇怪的错误。

Answer 4

我将使用

。

在不同浏览器中定位 的困难在“风格传奇修订版" 文章；因此，我可能不会使用 并尝试定位它，而是在 之外使用 。字段集>。