我解决了上一个问题，现在解决了我的新问题。我试图制作自己的标签栏(或导航栏，根据需要命名)。我在这里发现了很多关于此的问题，但我没有得到真正好的答案。所以，这是我的代码:
div.tab {
background-image: linear-gradient(#FEFEFE, #F1F1F1);
position: relative;
margin: auto;
overflow: hidden;
border-radius: 6px;
border-color: #DEDEDE;
}
div.tab button {
display: inline-block;
list-style-type: none;
background: inherit;
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
/*left: 50%;*/
}
div.tab button:hover {
background-image: linear-gradient(#6C6B6C, #686869);
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #636263;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
color: #FFFFFC;
text-shadow: 0px 0px 0px #FFFFFC;
}
div.tab button.active {
background-image: linear-gradient(#6C6B6C, #686869);
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #636263;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
color: #FFFFFC;
text-shadow: 0px 0px 0px #FFFFFC;
}
.tabcontent {
display: none;
padding: 4px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'Subscriptions')">Subscriptions</button>
<button class="tablinks" onclick="openTab(event, 'Friends')">Friends</button>
<button class="tablinks" disabled>System Appearance</button>
<button class="tablinks" onclick="openTab(event, 'Settings')">Settings</button>
</div>
</body>问题，我只有一个中心标签。如果我使用的是工作，但标签栏在页面末尾结束。我需要在最后一个选项卡上结束。那么，我要做什么？ (而且，如果你能再回答一个问题，那么不仅要围绕标签栏，还要看图片)
最佳答案
您应该通过将 display 的 css 属性设置为 inline-block 来将 tab div 设置为不占用父级的完整宽度
然后通过在父 div 上使用 text-align: center 将其居中。我添加了一个新的包装器 div.tab-container，这样您就不必将所有内容都放在 body
对于你的第二个问题，如果有帮助的话，调整半径可以降低它的可见度。
div.tab {
background-image: linear-gradient(#FEFEFE, #F1F1F1);
position: relative;
margin: auto;
overflow: hidden;
border-radius: 3px;
border-color: #DEDEDE;
display: inline-block;
}
div.tab-container {
text-align: center;
}
div.tab button {
display: inline-block;
list-style-type: none;
background: inherit;
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
/*left: 50%;*/
}
div.tab button:hover {
background-image: linear-gradient(#6C6B6C, #686869);
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #636263;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
color: #FFFFFC;
text-shadow: 0px 0px 0px #FFFFFC;
}
div.tab button.active {
background-image: linear-gradient(#6C6B6C, #686869);
display: block;
position: relative;
float: left;
border-style: solid;
border-width: 1px;
border-color: #636263;
outline: none;
padding: 4px 12px;
transition: 0.3s;
text-align: center;
color: #FFFFFC;
text-shadow: 0px 0px 0px #FFFFFC;
}
.tabcontent {
display: none;
padding: 4px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}<body>
<div class="tab-container">
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'Subscriptions')">Subscriptions</button>
<button class="tablinks" onclick="openTab(event, 'Friends')">Friends</button>
<button class="tablinks" disabled>System Appearance</button>
<button class="tablinks" onclick="openTab(event, 'Settings')">Settings</button>
</div>
</div>
</body>关于html - 如何使标签栏居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43000035/