Question

我正在尝试创建一个CSS样式表，以减少字段集的难度。

我正在尝试使用左侧浮动的legend（红色）和右侧的所有无线电选项。目前，它看起来像这样：

我对上述内容感到满意，但是当我缩小浏览器窗口大小时会出现问题。我想要增加label的高度和要包装的标签文本。不幸的是，整个事情被推到了下一行（legend下面），就像这样：

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

我理解这个问题的常见解决方案是将overflow: auto应用于父div，将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

从float: left移除.radioanswers，然后添加overflow: hidden：

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

Working example on JSFiddle.

CSS全高度浮动传奇

1 个答案: