Код html не проходит валидацию(div + label + input)

315
14 января 2017, 11:19

Вот такая вот штука(код ниже). Валидатор матерится, хотя визуально эффект получился :

Element div not allowed as child of element label in this context

Помогите исправить ошибки, буду благодарен

.cases { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
    padding-top: 52px; 
} 
 
.case1, .case2, .case3 { 
    float: left; 
    margin:10px 46px 0 0; 
    width: 270px; 
    height: 420px; 
    border: 1px solid #EDEDED; 
    cursor: pointer; 
    display: block; 
} 
 
.marker { 
    display: block; 
    width: 30%; 
    height: 2px; 
    margin: 0 auto; 
    background-color: #00B533; 
    opacity: 0; 
    transition: 0.3s; 
} 
 
#case1, #case2, #case3 { 
    display: none; 
} 
 
#case1:checked + .marker { 
    opacity: 1; 
} 
 
#case1:checked ~ .case-btn, #case2:checked ~ .case-btn, #case3:checked ~ .case-btn { 
    background: #00B533; 
    color: #fff; 
} 
 
/*#case2:checked ~ .case-btn{*/ 
/*background: #00B533;*/ 
/*}*/ 
/*#case3:checked ~ .case-btn{*/ 
/*background: #00B533;*/ 
/*}*/ 
 
#case2:checked + .marker { 
    opacity: 1; 
} 
 
#case3:checked + .marker { 
    opacity: 1; 
} 
 
.case-header { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    flex-wrap: wrap; 
    border-bottom: 1px solid #EDEDED; 
    height: 110px; 
} 
 
.case-title { 
    display: block; 
    width: 100%; 
    font-family: "Roboto Medium"; 
    font-size: 14px; 
    text-align: center; 
    padding: 25px 0; 
    margin: 0 auto; 
} 
 
.round { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 90px; 
    height: 90px; 
    border: 2px solid #00B533; 
    border-radius: 50%; 
    margin: 0 auto; 
 
    font-family: "Roboto Medium"; 
    font-size: 23px; 
    background: #fff; 
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1); 
} 
 
.round p:last-child { 
    font-family: "Roboto Light Italic"; 
    font-size: 10px; 
} 
 
.case-description { 
    text-align: center; 
    padding-top: 75px; 
} 
 
.case-description ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
 
.case-description ul li { 
    padding-top: 18px; 
} 
 
.case-btn { 
    display: block; 
    margin: 35px auto 0; 
    height: 30px; 
    width: 120px; 
    background: #fff; 
    border: 1px solid #EDEDED; 
    border-radius: 20px; 
    transition: 0.3s; 
} 
 
.case-btn:hover { 
    background: #00B533; 
    color: #ffffff; 
} 
 
.case-btn:focus { 
    outline: none; 
}
<div class="cases"> 
    <div class="case1"> 
        <label for="case1"> 
            <input type="radio" id="case1" name="choice" /> 
            <div class="marker"></div> 
            <div class="case-header"> 
                <p class="case-title">BLABLABLA</p> 
                <div class="round"> 
                </div> 
            </div> 
            <div class="case-description"> 
                <ul> 
                    <li > 
                        <p>Some Text</p> 
                    </li> 
                    <li > 
                       Some Text 
                    </li> 
                    <li > 
                       <p>Some Text</p> 
                    </li> 
                    <li >Some Text</li> 
                </ul> 
            </div> 
            <button class="case-btn">PURCHASE</button> 
        </label> 
    </div> 
</div>

READ ALSO
Что значит {% if not is_frame %} в html

Что значит {% if not is_frame %} в html

Я начинающий программист и не могу самостоятельно найти ответ на вопрос:

295
Как отформатировать текст?

Как отформатировать текст?

"Оформите предоплату на журнал" как сделать чтобы первые два слова были одного цвета и размера, а последнее другогоТолько не используя css (верстка...

329
GMap.NET проблемы с отображением маркеров

GMap.NET проблемы с отображением маркеров

Здравствуйте! Подскажите, пожалуйста, что не так делаюЕсли задаю маркер с прописанными вручную координатами, он отображается на карте, а если...

416