CSS tam boy basamaklı gösterge

Tarlaları daha az çirkin yapmak için bir CSS stil sayfası oluşturmaya çalışıyorum.CSS tam boy basamaklı gösterge

Sağdaki tüm radyo seçenekleriyle soldaki bir legend (kırmızı renkte) kullanmaya çalışıyorum.

Yukarıda memnunum ama tarayıcı penceresi boyutunu küçültün zaman sorun oluşur: Şu anda, bu gibi görünüyor. Artırmak için label'un yüksekliğini ve etiket metninin olmasını istiyorum. Maalesef her şey böyle, (legend altında) bir sonraki satıra aşağı itti alır:

Burada çözüm süzülüyor legend% 100 yüksekliğe sahip olmak olduğuna inanıyoruz.

Bu sorunun genel çözümünün, üstteki adada overflow: auto ve kayan öğeye height: 100% uygulamak olduğunu anlıyorum, ancak bu burada işe yaramıyor.

Benim 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>

Benim 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; 
}

kaynak

2016-03-20 Craig Johnstone

.radioanswers den float: left çıkarın ve yerine overflow: hidden ekleyin:

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

Working example on JSFiddle.

kaynak

2016-03-20 13:49:57 Marvin

Teşekkürler Marvin, bu işe yaradı! Bir takip sorusu, lütfen: Sarılı etiket metnini radyo düğmesinin altına düşürmek istemediysem, hangi değişikliği yapmalıyım? yani radyo buton bloğu tam yükseklikte olmalıdır. –

Nevermind, 'display: block; taşma: gizli; 'to' .radioanswer label'. Yardımlarınız için tekrar teşekkürler. –

CSS tam boy basamaklı gösterge

cevap

İlgili konular