Question

＆＃13;

<!--
<script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>
<style>
    .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: blue; 
    color: lightblue;
 
}
.button1:hover {
    background-color: lightblue;
    color: blue;
}
    </style>
    <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
    Hello noobies
    </div>
    -->
<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;
 
}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
}
ul.tab li {float: left;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
h3 {
	  opacity: 0.5;
}
p {
	  opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
</ul>
<div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>
  Still in development but really cool!<br>
  If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
    <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
    <h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
    </div>
  </p>
</div>
<div id="Files" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

</script> 
</body>
</html>

＆＃13;

有了这个，我希望蓝色条不会一直向右移动，只是在文件后停止。这只是一个测试，但我想看看它是如何工作的。我从W3Schools获得了一些代码。我只是无法弄清楚如何摆脱那些没有被使用的酒吧。 THX提前！ ;）

Answer 1

只需在代码中添加最后一行：

ul.tab {

        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #1ab2ff;
        display: inline-block;        
}

Answer 2

将显示内联块添加到ul和li。

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}

ul.tab li {
    float: left;
    display: inline-block;

使导航栏颜色不会转到侧面

2 个答案: