I'm doing tabs in css. but when it reaches a certain number, it breaks to the bottom line. I wanted it always to be online, even if it does not appear on the page.
.tabs {
list-style: none;
text-align: left;
margin: 0;
padding: 0;
padding-left: 5px;
padding-top: 5px;
background: rgba(204, 204, 204, .2);
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.tabs::after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid rgba(170, 170, 170, .3);
z-index: 1;
}
.tabs::before {
z-index: 1;
}
.tabs li {
display: inline-block;
margin: 0 2px;
padding: 6px 15px;
border: 1px solid #AAA;
border-bottom: none;
background: #ECECEC;
cursor: pointer;
position: relative;
z-index: 0;
}
.tabs li::before,
.tabs li::after {
position: absolute;
bottom: -1px;
width: 6px;
height: 6px;
content: " ";
border: 1px solid rgba(170, 170, 170, .3);
}
.tabs li::before {
left: -6px;
}
.tabs li::after {
right: -6px;
}
.tabs li.active {
background-color: #ffffff;
color: rgb(31, 31, 31);
z-index: 2;
border-bottom-color: #ffffff;
}
.tabs li {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tabs li:before {
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
}
.tabs li:after {
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
}
.tabs li::after {
font-family: "Font Awesome\ 5 Free";
font-weight: 100;
font-size: 7pt;
position: absolute;
content: "\f410";
top: -1px;
right: 2px;
color: red;
}
.tabs li {
border-top-right-radius: 0px;
}
<ul class="tabs">
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
<li class="tabs-item active">Geral</li>
<li class="tabs-item">Documentos</li>
<li class="tabs-item">Tarefas</li>
</ul>
<section data-role="tabs-contents">
<article data-mni="mniLotes">Conteudo do Lote</article>
<article data-mni="mniLancamentos">Conteudo do Lançamento</article>
<article data-mni="mniDash">Conteudo do Dashboard</article>
</section>