Question

我有一个非常奇怪的问题。

[扰流]

@charset "UTF-8";
 
body {
    background: url(../bilder/background.png);
}
 
#flexbox {
    display: flex;
    justify-content: center;
}
 
/* NAVIGATION */
nav {
    color: black;
    box-sizing: border-box;
    padding-left: 1%;
    width: 15%;
}
 
div.menu {
}
 
  div.menu ul {
    text-decoration: none;
    color: black;
    background-color: #bfbfbf;
    text-align: center;
    list-style: none;
    padding-left: 0px;
  }
 
  div.menu ul ul {
    background-color: lightgrey;
    display: none;
    list-style: none;
  }
 
  div.menu a {
    padding: 6%;
    display: block;
    text-decoration: none;
    color: black;
    list-style: none;
  }
 
  div.menu ul ul a{
    background-color: lightgrey;
  }
 
   div.menu li {
  }
 
  div.menu a:hover {
    background-color: #d9e79b;
  }
  div.menu a.active {
    background-color: #ddc295;
    color: black;
  }
  div.menu ul li:hover ul{
    display: block;
  }
 
/* MAINCONTENT */
main {
    width: 68%;
    margin-left: 1%;
    margin-right: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    min-height: 620px;
}
 
#img1 {
  display: none;
}
 
div.mobilebuttons {
    display: none;
}
 
aside {
    width: 15%;
}
 
aside img {
    padding: 1%;
    height: auto;
    width: 90%;
}
 
footer {
    text-align: right;
}
 
footer img {
    padding-top: 1%;
    padding-right: 1%;
    height: auto;
    width: 3%;
}
 
@media only screen and (max-width: 480px) {
 
    #flexbox {
     justify-content: center;
    }
 
    nav {
        display: none;
    }
 
    main {
        border: none;
        width: 98%;
       margin: auto;
        min-height: 430px;
    }
 
    #img1 {
    width: 30%;
    height: auto;
    display: block;
    margin: auto;
    }
 
    #p1 {
        width: 70%;
        margin: auto;
    }
 
    #p2 {
        display: none;
    }
 
    #p3 {
        display: none;
    }
 
    div.mobilebuttons {
        margin-top: 3%;
       display: flex;
        justify-content: space-between;
       text-decoration: none;
       list-style: none;
       color: black;
    }
 
    div.mobilebuttons a{
        color: black;
        text-decoration: none;
    }
 
    button.button1 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        box-sizing: border-box;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button2 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button3 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button4 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.active {
    background-color: #ddc295;
    color: black;
  }
 
    aside {
        display: none;
    }
 
    footer {
        display: none;
    }
 
 
}

<!doctype html>
<html>
  <head>
    <title>TESTPAGE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <header>
    </header>
    <div id="flexbox">
     <nav>
       <div class="menu">
          <ul>
            <li><a href="index.html"class="active">Home</a></li>
            <li><a href="test1.html">TEST1 &#x2B9A </a>
              <ul>
                <li><a href="test11.html">TEST11</a></li>
                <li><a href="test12.html">TEST12</a></li>
                <li><a href="test13.html">TEST13</a></li>
                <li><a href="test14.html">TEST14</a></li>
              </ul>
            </li>
            <li><a href="test2.html">TEST2</a></li>
            <li><a href="test3.html">TEST3</a></li>
            <li><a href="test4.html">TEST4</a></li>
          </ul>
       </div>
     </nav>
     <main>
        <img id="img1" src="bilder/bild1.gif">
       <div class="mobilebuttons">
         <button class="button1 active"><a href="index.html"> Home </a></button>
         <button class="button2"><a href="test1.html"> TEST1 </a></button>
         <button class="button3"><a href="test2.html"> TEST2 </a></button>
         <button class="button4"><a href="test3.html"> TEST3 </a></button>
        </div>
       <h2 align="center"> Herzlich Willkommen</h2>
        <p> &nbsp; </p>
        <p id="p1" align="center"> Bla Bla Bla. </p>
        <p id="p2" align="center"> Und weiter gehts mir BLA BLABLA BLA BLA BLA BLA BLA BLA BLAAAAAAAAAAAAAA</p>
        <p id="p3" align="center"> Aktuell ist folgendes: <a href="test1.html" target="_self">TEST1</a> </p>
     </main>
     <aside>
       <p align="center"><img src="bilder/bild1.gif" </p>
     </aside>
    </div>
    <footer>
     <p> Besucht uns auf: <span><a href="#" target="new"><img src="bilder/bild2.png"></a></span></p>
    </footer>
  </body>
</html>

[/扰流]

4个按钮（仅适用于智能手机上的SIte在手机上更改其大小）enter image description here

有谁知道为什么？除按钮外，一切正常。我猜使用“flexbox”不是问题。视口也应该是正确的......我真的不知道出了什么问题。其他一切都很好。

Flexbox按钮可在智能手机上更改大小

0 个答案: