CSS 全高浮动图例

Question

我正在尝试创建一个 CSS 样式表以使字段集不那么难看。

我正在尝试将左浮动 legend（红色）与右侧的所有单选选项一起使用。目前看起来是这样的：

我对上面的内容很满意，但是当我缩小浏览器 window 大小时出现问题。我希望 label 的高度增加，标签文本换行。不幸的是，整个事情被推到下一行（legend 下方），像这样：

我认为这里的解决方案是使浮动的 legend 具有 100% 的高度。

我知道这个问题的常见解决方案是在父级 div 上应用 overflow: auto，在浮动项上应用 height: 100%，但这似乎在这里不起作用。

我的HTML是：

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8" />
  <title>Test page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="screen.css" type="text/css" />

</head>

<body>

<fieldset class="radioquestion">
  <legend>Sample question?: </legend>
  <div class="radioanswers">
    <div class="radioanswer">
      <input type="radio" name="question1" id="question1answer1" value="answer1" required="true"/>
      <label class="radiolabel">Here is a sample answer 1<label>
    </div>
    <div class="radioanswer">
      <input type="radio" name="question1" id="question1answer2" value="answer2" required="true"/>
      <label class="radiolabel">A second sample answer is this one. This is a long answer.</label>
    </div>
    <div class="radioanswer">
      <input type="radio" name="question1" id="question1answer3" value="answer3" required="true"/>
      <label class="radiolabel">And a third.</label>
    </div>
  </div>
</fieldset>

</body>

</html>

我的CSS是：

.radioquestion{
  margin: 0 0 10px 0;
  padding: 0 0 0 0;
  border: 0;
  background-color: yellow;
  overflow: auto;
}

.radioquestion legend{
  float: left;
  display: block;
  margin: 0 10px 0 0;
  padding: 0 0 0 0;
  width: 200px;
  height: 100%;
  text-align: right; 
  background-color: red;
}

.radioanswers{
  float: left;
  background-color: blue;
}

.radioanswer label{
  width: initial;
  background-color: white;
  text-align: left;
}

.radioanswer{

}

input[type="radio"]{
  float: left;
  width: initial;
  margin-right: 10px;
  vertical-align: middle;
}

Answer 1

从 .radioanswers 中删除 float: left 并添加 overflow: hidden：

.radioanswers {
    /* float: left; */
    overflow: hidden;
}

Working example on JSFiddle.

CSS 全高浮动图例

CSS full height floated legend

html

css

forms

css-float