CSS полная высота плавающая легенда

Я пытаюсь создать таблицу стилей CSS, чтобы сделать полями менее уродливыми.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; 
}

источник

2016-03-20 Craig Johnstone

Удалите float: left из .radioanswers и добавить overflow: hidden вместо:

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

Working example on JSFiddle.

источник

2016-03-20 13:49:57 Marvin

Спасибо, Марвин, это сработало! Один следующий вопрос, пожалуйста: Если бы я хотел, чтобы текст обернутого ярлыка не попал ниже переключателя, какое изменение я должен сделать? т.е. блок радиокнопки будет иметь полную высоту. –

Nevermind, обработал его, добавив 'display: block; переполнение: скрыто, 'to' .radioanswer label'. Еще раз спасибо за помощь. –

CSS полная высота плавающая легенда

ответ

Смежные вопросы