[英]How can I right-align the css tabs' navigation buttons?
The link below is the live demo and the codes. 下面的链接是现场演示和代码。 How can I move the tab buttons to the right? 如何将选项卡按钮向右移动?
.tabs {
width: 100%;
overflow: auto
}
.tabs li.tab {
float: none;
display: inline;
}
.tabs input[type="radio"] {
display: none;
}
.tabs .tab>label {
padding: 8px;
border-radius: 5px 5px 0 0;
border: 1px solid #ddd;
cursor: pointer;
top: 0;
z-index: 3;
background-color: #eee;
}
.tabs .tab-content {
z-index: 2;
display: none;
float: left;
padding: 1em;
left: 0;
border: 1px solid #ddd;
margin-top: 8px;
min-width: 90%;
}
.tabs [id^="tab"]:checked + label {
background-color: #fff;
border-bottom: 1px solid #fff;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
Apply text-align: right
to the ul
element. 对ul
元素应用text-align: right
。
.tabs > ul {
text-align: right;
}
.tabs li.tab {
text-align: left; /* normalizing */
float: none;
display: inline;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.