CSS
ul.tabs {
display: table;
width: 100%;
padding-left: 0;
border-collapse: separate; /* セルの間隔を空ける */
border-spacing: 5px 0; /* 左右 上下で記述 */
margin-bottom: 0px;
}
ul.tabs li {
position: relative;
border: 1px solid #aaa;
display: table-cell;
width: auto;
list-style: none;
text-align: center;
font-size: 15px;
border-width: 1px;
border-style: solid;
border-color: #f5b5b5;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-color: #f5b5b5;
}
ul.tabs li a {
color: #f5b5b5;
text-decoration: none;
display:block; /*リンクの領域を広げる */
padding: 10px; /*リンクの領域を広げる */
}
ul.tabs li.active a {
color: #fff !important;
text-decoration: none;
}
ul.tabs li a:hover {
text-decoration: none;
}
ul.tabs li.active {
border-width: 1px 1px 0px 1px;
border-color: #f5b5b5;
border-style: solid;
position: relative;
background: #f5b5b5;
}
ul.tabs li:hover {
background: #efefef;
}
ul.tabs li:nth-child(4n+1) {
left: -5px;
}
ul.tabs li:nth-child(4n+2) {
left: -2px;
}
ul.tabs li:nth-child(4n+3) {
right: -2px;
}
ul.tabs li:nth-child(4n+4) {
right: -5px;
}
