CSS 个选项卡为 Google Chrome
CSS tabs as Google Chrome
我需要实现类似于 Google Chrome 选项卡的 CSS 选项卡。
如果选项卡太多，它们应该折叠到尽可能小的宽度，但如果只有几个选项卡，它们应该是，例如 150px。
目前它工作正常，当有很多标签时，但当只有 3 个标签时，它看起来不像预期的那样。
HTML
<h1>Lots of tabs, works fine</h1>
<ul class="tabs">
<li class="active"><a href="#" title="Active tab">Active tab</a>
</li>
<li><a href="#" title="Inactive tab 1">Inactive tab 1</a>
</li>
<li><a href="#" title="Inactive tab 2">Inactive tab 2</a>
</li>
<li><a href="#" title="Inactive tab 3">Inactive tab 3</a>
</li>
<li><a href="#" title="Inactive tab 4">Inactive tab 4</a>
</li>
<li><a href="#" title="Inactive tab 5">Inactive tab 5</a>
</li>
<li><a href="#" title="Inactive tab 6">Inactive tab 6</a>
</li>
<li><a href="#" title="Inactive tab 7">Inactive tab 7</a>
</li>
<li><a href="#" title="Inactive tab 8">Inactive tab 8</a>
</li>
<li><a href="#" title="Inactive tab 9">Inactive tab 9</a>
</li>
<li><a href="#" title="Inactive tab 10">Inactive tab 10</a>
</li>
</ul>
<h1>Few of tabs, works not as expected</h1>
<ul class="tabs">
<li class="active"><a href="#" title="Active tab">Active tab</a>
</li>
<li><a href="#" title="Inactive tab 1">Inactive tab 1</a>
</li>
<li><a href="#" title="Inactive tab 2">Inactive tab 2</a>
</li>
</ul>
CSS
.tabs {
display: table;
width: 100%;
table-layout: fixed;
margin: 0;
padding: 0;
}
.tabs li {
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
.tabs li a {
text-align: center;
display: block;
color: #979797;
padding: 10px 10%;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
}
.tabs li.active {
width: 150px;
}
.tabs li.active a {
padding-left: 15px;
padding-right: 15px;
background: #22234e;
color: #fff;
}
.tabs li:not(.active):hover {
width: 150px;
}
JSFiddle 示例：
http://jsfiddle.net/ang3r/k9rLLqwo/
谢谢！
有没有考虑过用jquery数出物品的数量然后做100/no。项，然后将该值作为每个项的宽度的百分比应用。
我认为这将是最适合您的方法。
希望对您有所帮助
好的，谢谢大家的建议。
我让它适用于所有浏览器：
CSS
.tabs {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.tabs li {
width: 150px;
}
.tabs li a {
text-align: center;
display: block;
color: #979797;
padding: 10px 15px;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
}
.tabs li.active a {
background: #22234e;
color: #fff;
}
.tabs li.active, .tabs li:not(.active):hover {
min-width: 150px;
max-width: 150px;
}
http://jsfiddle.net/k9rLLqwo/40/
它基于：
看看这个
Codepen
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
}
:root {
/** * THEME LIGHT */
--main-bg-color-light: rgba(255, 255, 255);
/* tabs colors */
--tabs-header-bg-color: rgb(231, 234, 236);
--tabs-bg-color: var(--tabs-header-bg-color);
--tabs-selected-bg-color: var(--main-bg-color-light);
--tabs-hover-bg-color: rgb(240, 243, 245);
--tabs-text-color: rgb(88, 92, 95);
--tabs-hover-text-color: rgb(88, 92, 95);
--tabs-selected-text-color: rgb(47, 48, 49);
/** * THEME DARK */
--main-bg-color-dark: rgb(49, 53, 57);
/* tabs colors */
--dark-tabs-header-bg-color: rgb(31, 32, 35);
--dark-tabs-bg-color: var(--main-bg-color-dark);
--dark-tabs-selected-bg-color: var(--dark-tabs-header-bg-color);
--dark-tabs-hover-bg-color: #25282b;
--dark-tabs-text-color: rgb(134, 136, 138);
--dark-tabs-hover-text-color: rgb(255, 255, 255);
--dark-tabs-selected-text-color: rgb(221, 226, 231);
}
.sd-tabs {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0 auto 20px;
background: #e5e5e5;
padding-top: 0.075rem;
position: relative;
background-color: var(--tabs-bg-color);
}
.sd-tabs[dark]{
background-color: var(--dark-tabs-bg-color);
}
.sd-tab-radio {
position: absolute;
opacity: 0;
}
.sd-tabs > .sd-tab-label {
background-color: var(--tabs-bg-color);
padding: 3px 5px 5px 10px;
display: flex;
align-items: center;
min-width: 0;
width: 100%;
border-radius: 5px 5px 0 0;
position: relative;
z-index: 2;
/* transition: background-color ease .2s, box-shadow ease .2s;
*/
cursor: pointer;
flex: 1;
}
.sd-tabs[dark] > .sd-tab-label{
background-color: var(--dark-tabs-bg-color);
}
.sd-tabs > .sd-tab-label:hover {
background-color: var(--tabs-hover-bg-color);
color: var(--tabs-hover-text-color);
z-index: 3;
}
.sd-tabs[dark] > .sd-tab-label:hover {
background-color: var(--dark-tabs-hover-bg-color);
color: var(--dark-tabs-hover-text-color);
}
.sd-tabs > .sd-tab-radio:checked .sd-tab-label {
z-index: 4;
}
.sd-tabs > .sd-tab-label::after, .sd-tabs > .sd-tab-label::before {
content: " ";
pointer-events: none;
position: absolute;
display: block;
height: 80%;
width: 100%;
bottom: 0px;
z-index: -1;
opacity: 0;
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.25);
color: var(--tabs-text-color);
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
color: var(--dark-tabs-text-color);
}
.sd-tabs > .sd-tab-radio:checked .sd-tab-label + .sd-tab-label, .sd-tabs > .sd-tab-label:hover + .sd-tab-radio:not(:checked) + .sd-tab-label {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover {
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio + .sd-tab-label:hover::before, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
left: -100%;
border-radius: 0 0 10px 0;
opacity: 1;
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
box-shadow: 14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::before {
box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio + .sd-tab-label:hover::after, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
right: -100%;
border-radius: 0 0 0 10px;
opacity: 1;
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
box-shadow: -14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::after {
box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label {
background-color: var(--tabs-selected-bg-color);
color: var(--tabs-selected-text-color);
z-index: 4;
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label {
background-color: var(--dark-tabs-selected-bg-color);
color: var(--dark-tabs-selected-text-color);
z-index: 4;
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
box-shadow: 14px 0.25em 0 -4px var(--tabs-hover-bg-color);
opacity: 1;
/* transition: all .2s;
*/
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
box-shadow: -14px 0.25em 0 -4px var(--tabs-hover-bg-color);
/* transition: all .2s;
*/
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
:root .sd-tabs > .sd-tab-radio + .sd-tab-label:first-of-type {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.0);
}
.sd-tabs > .sd-tab-content {
flex-basis: 100%;
display: none;
padding: 1em;
width: 100%;
background-color: var(--tabs-hover-bg-color);
box-shadow: inset 0px 0px 0 1px var(--tabs-selected-bg-color);
flex-direction: column;
border-radius: 0 0 5px 5px;
}
.sd-tabs > .break {
background-color: aqua;
flex-basis: 100%;
}
.sd-tabs[dark] > .sd-tab-content {
background-color: var(--dark-tabs-hover-bg-color);
color: var(--dark-tabs-text-color);
box-shadow: inset 0px 0px 0 1px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label + .sd-tab-content {
display: block;
}
.sd-tabs > .sd-tab-label .sd-tab-desc{
display: block;
margin: 7px 5px 5px 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
font-size: .75rem;
flex: 1 1 0%;
}
.sd-tabs > .sd-tab-label .sd-tab-icon{
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
width: 15px;
padding: 2px 3px;
}
.sd-tabs > .sd-tab-label .sd-tab-icon:not(.sd-tab-close){
width: 20px;
}
.sd-tabs > .sd-tab-label[icon-only] .sd-tab-icon:not(.sd-tab-close){
width: 24px;
margin: 0 auto;
}
.sd-tabs > .sd-tab-label .sd-tab-close:hover{
background-color: #4c4c4c33;
}
.sd-tabs > .sd-tab-label .sd-tab-close {
margin-left: auto;
}
.sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
visibility: hidden;
}
@media (min-width: 600px) {
.sd-tab-content {
order: 999;
}
.sd-tabs{
flex-direction: row;
}
.sd-tab-label {
max-width: 150px;
width: 150px;
border-radius: 10px 10px 0 0;
}
.sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
visibility: visible;
}
.sd-tabs > .sd-tab-label:first-of-type{
margin-left: 14px;
}
}
<div class="sd-tabs" dark>
<input class="sd-tab-radio" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked">
<label class="sd-tab-label" for="tabone">
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Tab One</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab One Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabtwo">
<label class="sd-tab-label" for="tabtwo">
<div class="sd-tab-desc">Tab Two</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Two Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabthree">
<label class="sd-tab-label" for="tabthree">
<div class="sd-tab-desc">Tab Three</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Three Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabfour">
<label class="sd-tab-label" for="tabfour">
<div class="sd-tab-desc">Tab Four</div>
</label>
<div class="sd-tab-content" tabindex="1">
<div class="sd-tabs">
<input class="sd-tab-radio" name="subtabs" tabindex="1" type="radio" id="subtabone" checked="checked">
<label class="sd-tab-label" for="subtabone">
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Tab One</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab One Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabtwo">
<label class="sd-tab-label" for="subtabtwo">
<div class="sd-tab-desc">Tab Two</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Two Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabthree">
<label class="sd-tab-label" for="subtabthree">
<div class="sd-tab-desc">Tab Three</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Three Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabfour">
<label class="sd-tab-label" for="subtabfour">
<div class="sd-tab-desc">Tab Four</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Four Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
</div>
</div>
我从事这个项目很长时间了。
我需要实现类似于 Google Chrome 选项卡的 CSS 选项卡。
如果选项卡太多，它们应该折叠到尽可能小的宽度，但如果只有几个选项卡，它们应该是，例如 150px。
目前它工作正常，当有很多标签时，但当只有 3 个标签时，它看起来不像预期的那样。
HTML
<h1>Lots of tabs, works fine</h1>
<ul class="tabs">
<li class="active"><a href="#" title="Active tab">Active tab</a>
</li>
<li><a href="#" title="Inactive tab 1">Inactive tab 1</a>
</li>
<li><a href="#" title="Inactive tab 2">Inactive tab 2</a>
</li>
<li><a href="#" title="Inactive tab 3">Inactive tab 3</a>
</li>
<li><a href="#" title="Inactive tab 4">Inactive tab 4</a>
</li>
<li><a href="#" title="Inactive tab 5">Inactive tab 5</a>
</li>
<li><a href="#" title="Inactive tab 6">Inactive tab 6</a>
</li>
<li><a href="#" title="Inactive tab 7">Inactive tab 7</a>
</li>
<li><a href="#" title="Inactive tab 8">Inactive tab 8</a>
</li>
<li><a href="#" title="Inactive tab 9">Inactive tab 9</a>
</li>
<li><a href="#" title="Inactive tab 10">Inactive tab 10</a>
</li>
</ul>
<h1>Few of tabs, works not as expected</h1>
<ul class="tabs">
<li class="active"><a href="#" title="Active tab">Active tab</a>
</li>
<li><a href="#" title="Inactive tab 1">Inactive tab 1</a>
</li>
<li><a href="#" title="Inactive tab 2">Inactive tab 2</a>
</li>
</ul>
CSS
.tabs {
display: table;
width: 100%;
table-layout: fixed;
margin: 0;
padding: 0;
}
.tabs li {
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
.tabs li a {
text-align: center;
display: block;
color: #979797;
padding: 10px 10%;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
}
.tabs li.active {
width: 150px;
}
.tabs li.active a {
padding-left: 15px;
padding-right: 15px;
background: #22234e;
color: #fff;
}
.tabs li:not(.active):hover {
width: 150px;
}
JSFiddle 示例： http://jsfiddle.net/ang3r/k9rLLqwo/
谢谢！
有没有考虑过用jquery数出物品的数量然后做100/no。项，然后将该值作为每个项的宽度的百分比应用。
我认为这将是最适合您的方法。
希望对您有所帮助
好的，谢谢大家的建议。 我让它适用于所有浏览器：
CSS
.tabs {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.tabs li {
width: 150px;
}
.tabs li a {
text-align: center;
display: block;
color: #979797;
padding: 10px 15px;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
}
.tabs li.active a {
background: #22234e;
color: #fff;
}
.tabs li.active, .tabs li:not(.active):hover {
min-width: 150px;
max-width: 150px;
}
http://jsfiddle.net/k9rLLqwo/40/
它基于：
看看这个 Codepen
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
}
:root {
/** * THEME LIGHT */
--main-bg-color-light: rgba(255, 255, 255);
/* tabs colors */
--tabs-header-bg-color: rgb(231, 234, 236);
--tabs-bg-color: var(--tabs-header-bg-color);
--tabs-selected-bg-color: var(--main-bg-color-light);
--tabs-hover-bg-color: rgb(240, 243, 245);
--tabs-text-color: rgb(88, 92, 95);
--tabs-hover-text-color: rgb(88, 92, 95);
--tabs-selected-text-color: rgb(47, 48, 49);
/** * THEME DARK */
--main-bg-color-dark: rgb(49, 53, 57);
/* tabs colors */
--dark-tabs-header-bg-color: rgb(31, 32, 35);
--dark-tabs-bg-color: var(--main-bg-color-dark);
--dark-tabs-selected-bg-color: var(--dark-tabs-header-bg-color);
--dark-tabs-hover-bg-color: #25282b;
--dark-tabs-text-color: rgb(134, 136, 138);
--dark-tabs-hover-text-color: rgb(255, 255, 255);
--dark-tabs-selected-text-color: rgb(221, 226, 231);
}
.sd-tabs {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0 auto 20px;
background: #e5e5e5;
padding-top: 0.075rem;
position: relative;
background-color: var(--tabs-bg-color);
}
.sd-tabs[dark]{
background-color: var(--dark-tabs-bg-color);
}
.sd-tab-radio {
position: absolute;
opacity: 0;
}
.sd-tabs > .sd-tab-label {
background-color: var(--tabs-bg-color);
padding: 3px 5px 5px 10px;
display: flex;
align-items: center;
min-width: 0;
width: 100%;
border-radius: 5px 5px 0 0;
position: relative;
z-index: 2;
/* transition: background-color ease .2s, box-shadow ease .2s;
*/
cursor: pointer;
flex: 1;
}
.sd-tabs[dark] > .sd-tab-label{
background-color: var(--dark-tabs-bg-color);
}
.sd-tabs > .sd-tab-label:hover {
background-color: var(--tabs-hover-bg-color);
color: var(--tabs-hover-text-color);
z-index: 3;
}
.sd-tabs[dark] > .sd-tab-label:hover {
background-color: var(--dark-tabs-hover-bg-color);
color: var(--dark-tabs-hover-text-color);
}
.sd-tabs > .sd-tab-radio:checked .sd-tab-label {
z-index: 4;
}
.sd-tabs > .sd-tab-label::after, .sd-tabs > .sd-tab-label::before {
content: " ";
pointer-events: none;
position: absolute;
display: block;
height: 80%;
width: 100%;
bottom: 0px;
z-index: -1;
opacity: 0;
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.25);
color: var(--tabs-text-color);
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
color: var(--dark-tabs-text-color);
}
.sd-tabs > .sd-tab-radio:checked .sd-tab-label + .sd-tab-label, .sd-tabs > .sd-tab-label:hover + .sd-tab-radio:not(:checked) + .sd-tab-label {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover {
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio + .sd-tab-label:hover::before, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
left: -100%;
border-radius: 0 0 10px 0;
opacity: 1;
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
box-shadow: 14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::before {
box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio + .sd-tab-label:hover::after, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
right: -100%;
border-radius: 0 0 0 10px;
opacity: 1;
/* transition: opacity ease .2s, box-shadow ease .2s;
*/
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
box-shadow: -14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::after {
box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label {
background-color: var(--tabs-selected-bg-color);
color: var(--tabs-selected-text-color);
z-index: 4;
}
.sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label {
background-color: var(--dark-tabs-selected-bg-color);
color: var(--dark-tabs-selected-text-color);
z-index: 4;
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
box-shadow: 14px 0.25em 0 -4px var(--tabs-hover-bg-color);
opacity: 1;
/* transition: all .2s;
*/
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
.sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
box-shadow: -14px 0.25em 0 -4px var(--tabs-hover-bg-color);
/* transition: all .2s;
*/
}
.sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
:root .sd-tabs > .sd-tab-radio + .sd-tab-label:first-of-type {
box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.0);
}
.sd-tabs > .sd-tab-content {
flex-basis: 100%;
display: none;
padding: 1em;
width: 100%;
background-color: var(--tabs-hover-bg-color);
box-shadow: inset 0px 0px 0 1px var(--tabs-selected-bg-color);
flex-direction: column;
border-radius: 0 0 5px 5px;
}
.sd-tabs > .break {
background-color: aqua;
flex-basis: 100%;
}
.sd-tabs[dark] > .sd-tab-content {
background-color: var(--dark-tabs-hover-bg-color);
color: var(--dark-tabs-text-color);
box-shadow: inset 0px 0px 0 1px var(--dark-tabs-selected-bg-color);
}
.sd-tabs > .sd-tab-radio:checked + .sd-tab-label + .sd-tab-content {
display: block;
}
.sd-tabs > .sd-tab-label .sd-tab-desc{
display: block;
margin: 7px 5px 5px 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
font-size: .75rem;
flex: 1 1 0%;
}
.sd-tabs > .sd-tab-label .sd-tab-icon{
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
width: 15px;
padding: 2px 3px;
}
.sd-tabs > .sd-tab-label .sd-tab-icon:not(.sd-tab-close){
width: 20px;
}
.sd-tabs > .sd-tab-label[icon-only] .sd-tab-icon:not(.sd-tab-close){
width: 24px;
margin: 0 auto;
}
.sd-tabs > .sd-tab-label .sd-tab-close:hover{
background-color: #4c4c4c33;
}
.sd-tabs > .sd-tab-label .sd-tab-close {
margin-left: auto;
}
.sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
visibility: hidden;
}
@media (min-width: 600px) {
.sd-tab-content {
order: 999;
}
.sd-tabs{
flex-direction: row;
}
.sd-tab-label {
max-width: 150px;
width: 150px;
border-radius: 10px 10px 0 0;
}
.sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
visibility: visible;
}
.sd-tabs > .sd-tab-label:first-of-type{
margin-left: 14px;
}
}
<div class="sd-tabs" dark>
<input class="sd-tab-radio" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked">
<label class="sd-tab-label" for="tabone">
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Tab One</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab One Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabtwo">
<label class="sd-tab-label" for="tabtwo">
<div class="sd-tab-desc">Tab Two</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Two Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabthree">
<label class="sd-tab-label" for="tabthree">
<div class="sd-tab-desc">Tab Three</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Three Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabfour">
<label class="sd-tab-label" for="tabfour">
<div class="sd-tab-desc">Tab Four</div>
</label>
<div class="sd-tab-content" tabindex="1">
<div class="sd-tabs">
<input class="sd-tab-radio" name="subtabs" tabindex="1" type="radio" id="subtabone" checked="checked">
<label class="sd-tab-label" for="subtabone">
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Tab One</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab One Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabtwo">
<label class="sd-tab-label" for="subtabtwo">
<div class="sd-tab-desc">Tab Two</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Two Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabthree">
<label class="sd-tab-label" for="subtabthree">
<div class="sd-tab-desc">Tab Three</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Three Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabfour">
<label class="sd-tab-label" for="subtabfour">
<div class="sd-tab-desc">Tab Four</div>
</label>
<div class="sd-tab-content" tabindex="1">
<h2>Tab Four Content</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
</div>
</div>
我从事这个项目很长时间了。