Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Стол заказов » Не работает свойство у вкладок heigth auo, надо подправить.

Не работает свойство у вкладок heigth auo, надо подправить.


 wcw2007    27.12.2016    Стол заказов    1072    5 комментариев

Оплата яндекс деньги.



В табах не работает свойство heicth:auto только нужно прописывать px, но все вкладки разного размера по содержанию текста. 

.tabs1 {width: 100%; height:220px; } 



.tabs1 ul, 
.tabs1 li { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
.tabs1, 
.tabs1 input[type="radio"]:checked + label { 
position: relative; 
} 
.tabs1 li, 
.tabs1 input[type="radio"] + label { 
display: inline-block; 
} 
.tabs1 li > div, 
.tabs1 input[type="radio"] { 
position: absolute; 
} 
.tabs1 li > div, 
.tabs1 input[type="radio"] + label { 
border: solid 1px #ccc; 
} 
.tabs1 { 
font: normal 13px Arial, Sans-serif; 
color: #404040; 
} 
.tabs1 li { 
vertical-align: top; 
} 
.tabs1 li:first-child { 
margin-left: 8px; 
} 
.tabs1 li > div { 
top: 33px; 
bottom: 0; 
left: 0; 
width: 100%; 
padding: 8px; 
overflow: auto; 
background: #fff; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

} 
.tabs1 input[type="radio"] + label { 
margin: 0 2px 0 0; 
padding: 0 18px; 
line-height: 32px; 
background: #f1f1f1; 
text-align: center; 
border-radius: 5px 5px 0 0; 
cursor: pointer; 
-moz-user-select: none; 
-webkit-user-select: none; 
user-select: none; 
} 
.tabs1 input[type="radio"]:checked + label { 
z-index: 1; 
background: #fff; 
border-bottom-color: #fff; 
cursor: default; 
} 
.tabs1 input[type="radio"] { 
opacity: 0; 
} 
.tabs1 input[type="radio"] ~ div { 
display: none; 
} 
.tabs1 input[type="radio"]:checked:not(:disabled) ~ div { 
display: block; 
} 
.tabs1 input[type="radio"]:disabled + label { 
opacity: .5; 
cursor: no-drop; 
} 



Html 


<div style="text-align:center;">Популярное</div> 

<div class="tabs1"> 
<ul> 
<li> 
<input type="radio" name="tabs1-0" checked="checked" id="tabs1-0-3" /> 
<label for="tabs1-0-3">Сегодня</label> 
<div> 
1111 
</div> 
</li> 
<li> 
<input type="radio" name="tabs1-0" id="tabs1-0-4" /> 
<label for="tabs1-0-4">Неделя</label> 
<div> 
222 
</div> 
</li> 

<li> 
<input type="radio" name="tabs1-0" id="tabs1-0-5" /> 
<label for="tabs1-0-5">Месяц</label> 
<div> 
333 
</div> 
</li> 
</ul> 
</div>

5 комментариев

Верстала
Юзер

Верстала - 27 декабря 2016 16:29 -

min-height:220px;

wcw2007
Юзер

wcw2007 - 27 декабря 2016 16:35 -

там ошибка height:auto

wcw2007
Юзер

wcw2007 - 27 декабря 2016 17:59 -

min-height:220px; не помоает если убрать 220 появляются стрелочки прокрути

lutskboy
Эксперт

lutskboy - 28 декабря 2016 11:53 -

.tabs1 input[type="radio"]:checked:not(:disabled) ~ div {
display: inline-table;
}
https://jsfiddle.net/lutskboy/4rv3b8g3/

lutskboy
Эксперт

lutskboy - 28 декабря 2016 12:00 -


Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх