html - 模块标签系统中的按钮问题

Question

我需要关于一个错误的建议。在我做的页面上，我有模块和理论，它们都在标签系统中，这样你就可以用理论切换这些模块，但是这些标签链接上的按钮，所以它们会弹出并总是在彼此上方移动，而不是紧挨着。我没有在任何地方找到错误，所以我需要建议，在我看来，这不会是 css 中的错误，而是其他方面的错误，但我不确定，提前感谢您的帮助。

我将在代码下方附上带有问题的图像示例。

HTML 代码：

<button class="tablinks react-to-dark" onclick="openModule(event, 'morse', 'morse-theory')" id="defaultOpen" >Morseovka</button>
    <button class="tablinks react-to-dark" onclick="openModule(event, 'ascii', 'ascii-theory')">ASCII</button>
    
    <div id="module">
        <div id="morse" class="tabcontent">
            {% include 'modules/morse-code.html' %}
        </div>

        <div id="ascii" class="tabcontent">
            {% include 'modules/ascii.html' %}
        </div>
    </div>
    <br>
    <div class="theory">
        <div id="morse-theory" class="tabcontent">
            <h3>Moseovka</h3>
            <p>Morseova abeceda je skupina symbolů, která je používána v telegrafii. Kóduje znaky latinské abecedy, číslice a speciální znaky <span class="dots">...</span><span class="more">do kombinací krátkých a dlouhých signálů. Ty je možné přenášet na dálku jednodušším způsobem než všechny znaky abecedy. K přenosu morseovky je možné použít zvukový signál, elektrický signál (telegraf), optický signál (signalizace vlajkami, záznam na papír pomocí teček a čárek, světelné záblesky). 
                Nejběžnější použití je dnes v amatérské radiotelegrafii. Rychlost komunikace se pohybuje od 60 do 250 znaků za minutu.</span></p>
                <button onclick="readMore(this)" class="readmore" class="theory-btn">Číst dále</button>
        </div>
    </div>
    <br>
    <div class="theory">
        <div id="ascii-theory" class="tabcontent">
            <h3>ASCII</h3>
            <p>ASCII tabulka je číselné vyjádření znaků abecedy a znaků používaných k zápisu textu, čísel, apod. Kód ASCII je podle původní definice <span class="dots">...</span><span class="more">sedmibitový, obsahuje tedy 128 platných znaků. 
                Pro potřeby dalších jazyků a pro rozšíření znakové sady se používají osmibitová rozšíření ASCII kódu, která obsahují dalších 128 kódů.</span></p>
                <button onclick="readMore(this)" class="readmore" class="theory-btn">Číst dále</button>
        </div>
    </div>

CSS 代码：

.tablinks {
    outline: none;
    appearance: none;
    background-color: #04c4d911;
    border: solid 6px $cyan0;
    margin: 0px;
    padding: 2px;
    padding-left: 3em;
    padding-right: 3em;
    border-bottom: none;
    border-radius: 1em 1em 0% 0%;
}

.tablinks:hover {
    background-color: #04c4d93a;
}

.tablinks:active {
    background-color: #04c4d99c;
}

JS代码：

function openModule(evt, moduleId, theoryId) {
  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(moduleId).style.display = "block";
  evt.currentTarget.className += " active";

  document.getElementById(theoryId).style.display = "block";
  evt.currentTarget.className += " active";
}

window.onload = function(e){ 
  document.getElementById("defaultOpen").click();
}

这里的问题是标签卡向上移动了，我不知道为什么：

它应该如下所示：

标签： htmlcss

Answer 1

在这里，我为您提供了便利。

function openCity(cityName, className) {
    var i;
    var x = document.getElementsByClassName(className);
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(cityName).style.display = "block";
}

            .id {
                width: 600px !important;
                margin-left: 10px !important;

            }

            .tb {
                    border: 5px solid #27C4D9 !important;
                border-top-left-radius: 17px;
                border-top-right-radius: 17px;
                border-bottom: none !important;
                background-color: #04c4d911 !important;
                height: 35px !important;
            }

            .mc {
                border: 6px solid #27C4D9 !important;
                background-color: #04c4d911 !important;
                 
            }

            p {
                color: red;
            }

        <!DOCTYPE html>
        <html>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <body>
            <div class="id">
                <div class="w3-container">
                    <h2>Tabs</h2>

                </div>

                <div>
                    <button class=" w3-button tb" style=" width: 100px !important;" onclick="openCity('London', 'city')">London</button>
    &nbsp;
    <button class="w3-button tb" style=" width: 150px !important;" onclick="openCity('Paris', 'city')">Paris</button>


                </div>
                <div class="mc">
                    <div id="London" class="w3-container city">
                        <p> Is it everything works fine now if yes so appriciate me. </p>
                        <hr>
                        <h3>Data is here</h3>
                    </div>

                    <div id="Paris" class="w3-container city" style="display:none">
                        <p> Something data which is here goes right here for second tab </p>
                        <hr>
                        <h3>Data is here2</h3>
                    </div>


                </div>
            </div>


            <div class="id">
                <div class="w3-container">
                    <h2>Tab2</h2>

                </div>

                <div>
                    <button class=" w3-button tb" style=" width: 100px !important;" onclick="openCity('Lon', 'ci')">One more</button>
    &nbsp;
    <button class="w3-button tb" style=" width: 150px !important;" onclick="openCity('Par', 'ci')">Second Tab</button>


                </div>
                <div class="mc">
                    <div id="Lon" class="w3-container ci">
                        <p> All contant changes here no one is duplicated </p>
                        <hr>
                        <h3>Data3</h3>
                    </div>

                    <div id="Par" class="w3-container ci" style="display:none">
                        <p> Something is here I don't know what.   </p>
                        <hr>
                        <h3>Data4</h3>
                    </div>


                </div>
            </div>

我想这就是你想要的。

在这里找到答案：https ://stackoverflow.com/a/68793575/16639239