Как разместить вкладки CSS CSS

использует CSS-вкладки из трюков CSS. Они отлично работают, только проблема в том, мне нужно сами вкладки, чтобы быть в центре страницы, три в ряд, как этот сайт:Как разместить вкладки CSS CSS

http://lewishowes.com/ (3 вкладки прямо под спонсоров)

Вот jsfiddle :

http://jsfiddle.net/4zrsD/

А вот код:

CSS

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
}

HTML

<div class="tabs"> 

    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab One</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab Two</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

    </div>

Спасибо!

источник

2014-02-14 user3299495

.tab:nth-child(1) { margin-left: 30%; }

http://jsfiddle.net/4zrsD/1/

Это не очевидно, центр его прекрасно, но вы можете использовать медиа-запросы, чтобы получить его более сосредоточенным в зависимости от ширины экрана.

источник

2014-02-14 01:28:04 CRABOLO

Это не очень хорошее решение. Это довольно неточно –

@ ZachSaucier Ну, это потребует много переделки с настройкой html, чтобы получить его точным. И хорошо, я не собираюсь делать все это, когда OP показывает нам код, который она не писала в первую очередь. – CRABOLO

He *;) Спасибо за ответ, о переработке HTML ... можете ли вы указать мне в правильном направлении? Благодаря! – user3299495

добавить это (может быть поможет полностью)

.tab метку {дисплей: блок; обивка: 3px;}/уменьшить отступы/ .tab {ширина: 33,33%;}/одинаковую ширину для вкладки/

множество другой вещи, в соответствии с содержанием

источник

2014-02-14 09:41:14 user3302090

Вот решение, которое работает для меня:

<div class="centered"> 

    <ul ... > 
     <li class="centered_tab" ...> 
     <a ... >My First Tab</a> 
     </li> 
     <li class="centered_tab" ...> 
     <a ... >My Second Tab</a> 
     </li> 
     <li class="centered_tab" ...> 
     <a ... >My Third Tab</a> 
     </li> 
    </ul> 

</div>

С помощью CSS:

.centered { 
    text-align: center; 
    width: 100%; 
} 

.centered_tab { 
    float:none /*to make sure there is no active float*/ 
    display: inline-block 
}

div заботится о центрирования его детей (вкладки). Удостоверьтесь, что вы удаляете любое плавание, которое предотвращает центрирование вкладок. Display:inline-block позволяют им идти хорошо на той же линии

Ваш пример скрипку с моим решением применяется: http://jsfiddle.net/ufqduw6n/1/

источник

2017-01-31 15:16:18

Как разместить вкладки CSS CSS

ответ

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