Сброс списка <UL> на вертикальный
Я создал область с вкладками, используя список "" переключателей. Теперь они складываются горизонтально.
Теперь мне нужно создать список в области содержимого области вкладок. Но когда я создаю список, списки также горизонтальны.
Есть ли способ нацеливания на UL в пределах UL и "его сброс"? Или, может быть, я могу использовать, но изменить цифры на пули?
Вот ссылка на скрипку: http://jsfiddle.net/SteveDavies/4Njb6/ Вот некоторые CSS для области с вкладками
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 16px;
font-weight: BOLD;
font-family: helvetica;
background: #ccc;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
clear:both;
}
.tabs label:hover {
background: #adafaf;
top: 0px;
}
и вот код в HTML для одной из вкладок:
<div style="clear:both;">
<ul class="tabs">
<!-- FIND ME TAB -->
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>
<div id="tab-content1" class="findmecontent animated fadeIn"
>
Надеюсь, вы можете помочь!
Большое спасибо
Стив
2 ответа
Я добавил CSS, это может помочь вам. Я надеюсь, что это то, что вы ожидаете. Дайте мне знать, если это не ожидаемый результат.
Css:
.normalul h3 li,.findmecontent div ul li{
float:none;
}
Добавь это:
.normalul {display: inline-block; }
.normalul li {float: left; ясно: оба; }
??