Question

所以每当我将7个按钮中的任何一个按下时，一切都会向右移动。有人可以快速向我展示一个解决方案。我知道这不是一个很好的代码，但我只是HTML的一个初学者。

<html>
<head> 
    <title> Desenele Animate </title>
    <center> <font face="Lucida Bright" color="#000000" size="48"> Desenele Animate </font> </center>   
    <style>
        .button {
        background-color: #4CAF50;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
        border-radius: 8px;
        width: 250px;
        }

        .button1 {
            background-color: #4CAF50;
            color: white;
        }
        .button1:hover {
            background-color: white; 
        color: black; 
            border: 2px solid #4CAF50;
        }

        .button2 {
            background-color: #008CBA;
            color: white;
        }
        .button2:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #008CBA;
        }

        .button3 {
            background-color: #f44336;
            color: white;
        }
        .button3:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #f44336;
        }

        .button4 {
        background-color: #ffa500;
        color: white;
        }
        .button4:hover {    
        background-color: white;
            color: black;
            border: 2px solid #ffa500;
        }`

        .button5 {
        background-color: #bf80ff;
            color: white;
        }
        .button5:hover {
            background-color: white;
            color: black;
            border: 2px solid #bf80ff;
        }

        .button6 {
        background-color: #ff66ff;
            color: white;
        }
        .button6:hover {
            background-color: white;
            color: black;
            border: 2px solid #ff66ff;
        }
        .button7 {
        background-color: #00cccc;
            color: white;
        }
        .button7:hover {
            background-color: white;
            color: black;
            border: 2px solid #00cccc;
        }

    </style>        
</head>
<body bgcolor= "white"> 
    <br>
    <div id="nav">
    <table style="float:left;">
        <tr><td><a href="Archer.html" class="button button1">Archer</a><br></td></tr>
        <tr><td><a href="South park.html" class="button button2">South Park</a><br></td></tr>
        <tr><td><a href="Gravity Falls.html" class="button button3">Gravity Falls</a><br></td></tr>
        <tr><td><a href="Steven Universe.html" class="button button4">Steven Universe</a><br></td></tr>
        <tr><td><a href="Adventure Time.html" class="button button5">Adventure Time</a><br></td></tr>   
        <tr><td><a href="Rick and Morty.html" class="button button6">Rick And Morty</a><br></td></tr>
        <tr><td><a href="Futurama.html" class="button button7">Futurama</a><br></td></tr>
    </table>    
    </div>
    <center> <font face="Lucida Bright" color="#000000" size="5"> Desenele animate au inceput sa devina din ce in ce mai interesante, diferite si amuzante. Desigur, nu ne referim la desene precum "Looney Tunes". Ne referim la cele noi! Pline de sarcasm si de glume rautacioase! Am ales cateva PE care noi le consideram foarte inventive, amuzante si suntem siguri ca o sa va placa. Inainte de a le prezenta ne-am gandit sa vorbim putin despre ce sunt ele si evolutia lor, DAAAAR ne-am dat seama ca ar fi MULT prea plictisitor asa ca hai sa trecem direct la review-uri.</font></center>
    <br>
    <center> <img src="cornel.jpg"> </center>
</body>
</html>

Answer 1

您应该添加默认的透明边框

.button {
    border: 2px solid transparent;

导致:hover您添加该边框border: 2px solid #00cccc;因此元素移动 2 px

＆＃13;

a.btn:hover{
  border:2px solid red;
}

/* solution */
a.button{
  border:2px solid transparent;
}
a.button:hover{
  border:2px solid red;
}

＆＃13;

<a class="btn">HOVER ME (I HAVE THT ISSUE...)</a><br>
<a class="button">HOVER ME (I feel just fine!)</a><br>

＆＃13;

我刚刚注意到您正在使用<center>和<font>标记。不要这些代码在某些浏览器中有效，只是为了向后兼容，但已弃用！请改用CSS text-align: center;和font-size。

Answer 2

您还需要为默认/自然状态声明边框宽度，以便在悬停期间适应更改。

示例： border: 2px solid transparent;

＆＃13;

.button {
        background-color: #4CAF50;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 8px;
            width: 250px;
            border: 2px solid transparent;
        }

        .button1 {
            background-color: #4CAF50;
            color: white;
        }
        .button1:hover {
            background-color: white; 
        color: black; 
            border: 2px solid #4CAF50;
        }

        .button2 {
            background-color: #008CBA;
            color: white;
        }
        .button2:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #008CBA;
        }

        .button3 {
            background-color: #f44336;
            color: white;
        }
        .button3:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #f44336;
        }

        .button4 {
        background-color: #ffa500;
        color: white;
        }
        .button4:hover {    
        background-color: white;
            color: black;
            border: 2px solid #ffa500;
        }`

        .button5 {
        background-color: #bf80ff;
            color: white;
        }
        .button5:hover {
            background-color: white;
            color: black;
            border: 2px solid #bf80ff;
        }

        .button6 {
        background-color: #ff66ff;
            color: white;
        }
        .button6:hover {
            background-color: white;
            color: black;
            border: 2px solid #ff66ff;
        }
        .button7 {
        background-color: #00cccc;
            color: white;
        }
        .button7:hover {
            background-color: white;
            color: black;
            border: 2px solid #00cccc;
        }

＆＃13;

<div id="nav">
    <table style="float:left;">
        <tr><td><a href="Archer.html" class="button button1">Archer</a><br></td></tr>
        <tr><td><a href="South park.html" class="button button2">South Park</a><br></td></tr>
        <tr><td><a href="Gravity Falls.html" class="button button3">Gravity Falls</a><br></td></tr>
        <tr><td><a href="Steven Universe.html" class="button button4">Steven Universe</a><br></td></tr>
        <tr><td><a href="Adventure Time.html" class="button button5">Adventure Time</a><br></td></tr>   
        <tr><td><a href="Rick and Morty.html" class="button button6">Rick And Morty</a><br></td></tr>
        <tr><td><a href="Futurama.html" class="button button7">Futurama</a><br></td></tr>
    </table>    
    </div>
    <center> <font face="Lucida Bright" color="#000000" size="5"> Desenele animate au inceput sa devina din ce in ce mai interesante, diferite si amuzante. Desigur, nu ne referim la desene precum "Looney Tunes". Ne referim la cele noi! Pline de sarcasm si de glume rautacioase! Am ales cateva PE care noi le consideram foarte inventive, amuzante si suntem siguri ca o sa va placa. Inainte de a le prezenta ne-am gandit sa vorbim putin despre ce sunt ele si evolutia lor, DAAAAR ne-am dat seama ca ar fi MULT prea plictisitor asa ca hai sa trecem direct la review-uri.</font></center>
    <br>
    <center> <img src="cornel.jpg"> </center>

＆＃13;

Answer 3

尝试box-sizing: border-box;

* {
    box-sizing: border-box;
}

修改：您还可以在正常按钮状态下添加隐藏边框

每当我将鼠标悬停在按钮上时，我的文字和图像就会移动

3 个答案: