jquery - 如何让我的按钮在我的网站中向下移动？

标签 jquery html css

我正在努力让我的网站适合移动设备。每当它达到 700 最大宽度时，我的按钮就会堆叠在一起，但我不知道如何让它们向下移动屏幕!我看过的大多数网站都说要么使用 position absolute 然后做 left px 或 % 其他人说使用 margin 但这不起作用，因为如果我使用 top-margin 它会隔开所有其他按钮!有任何想法吗？我希望我解释得很好。

<head>
<title>MorganaWhite|About Me</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="about.css">
<style>
body {
    background-color: #e3e3e3;
    margin: 0 auto;
    padding: 0;
    font-family: Arial;
}
.header {
    background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    border: 1px solid #000;
    text-align: center;
    height: 700px;
    }

.mobilelinks {display: none;}

.wrapper {
    margin: 50px;
}

#footer {
    text-align: center;
}

#footer a {
    color: #666;
    margin-left: 8px;
}

#footer a:hover {
    color: #222;
    text-decoration: underline;
}

h1 {
    color: white;
    font-family: Arial;
    font-size: 72px;
    letter-spacing: 1px;
}
h2 {
    color: #525252;
    font-size: 36px;
    letter-spacing: 1px;
    text-align: center;

}
p {
    font-family: Gill Sans, sans-serif;
    color:#696969;
    font-size: 17px;
    text-align: center;
    line-height: 150%;
}
a {
    color: white;
    text-decoration:none;
}

ul li {
    text-align: center;
    line-height: 40px;
    display: inline-block;
    letter-spacing: 1px;
    background-color: rgba(5, 4, 2, 0.1);
    border: 2px solid white;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 90%;
    width: 150px;
    height: 40px;
        margin-left: 11%;
        margin-top: 12%;
}

ul li:hover {
    background-color: white;
}
ul li:hover > a {
    color: #000;
}

@media screen and (max-width: 750px) {
    .header {height: 300px;}
        ul li {margin-top: 0%;}
    ul li { }
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
    }
    ul li {margin-top: 0%;}
        .links {display: none;}
    .mobilelinks {display: inline-block;}
}

@media screen and (max-width: 750px) {
    .header {height: 300px;}
    ul li {margin-top: 0%;}
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
    }
    .links {display: none;}
    ul li {margin-top: 0%;}
    .mobilelinks {display: inline-block;}
}


  @media screen and (max-width: 400px) {
    .header {height: 200px;}
    .mobile-terms { display: none;}
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 22px;
    }
    ul li {margin-top: 0%;}
}

</style>
</head>
<body>
    <div class="header">
        <h1>WHO I AM</h1>
                  <ul class="links">
                     <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
                     <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
                     <li><a href="#middle"><strong>RESUME</strong></a></li>
                     <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
            </ul>
            <ul class="mobilelinks">
                <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
                <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
                <li><a href="#middle"><strong>RESUME</strong></a></li>
                <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
            </ul>
    </div>
    <div id="mainwrapper">
        <div class="wrapper">
            <h2>Some Fun Facts</h2>
                <p>
                I made this website from scratch when I was 14, <br>
                I have a twin brother whose name is Pierson McNeal White, <br>
                I have a older brother and sister who are also twins, <br>
                I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
                and I watch the super bowl for the ads.
                </p>
        </div>
        <hr>
        <div class="wrapper">
            <h2>Me In A Nutshell</h2>
                <p>
                Other Crap Here.
                </p>
        </div>
    </div>
    <div id="footer">
            Copyright &copy;&nbsp;<script>document.write(new Date().getFullYear())</script>&nbsp;Morgan.
          <div>
            <a href="#">Link</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
          </div>
    </div>

最佳答案

这里的原因是您给 .header 的 height 即 300 像素。将其更改为足够的像素，以便您的按钮可以获得足够的空间来塞进去。

我会建议更好地使用 auto 或100vh，但比它你的愿望。

Working : Demo 

body {
  background-color: #e3e3e3;
  margin: 0 auto;
  padding: 0;
  font-family: Arial;
}

.header {
  background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border: 1px solid #000;
  text-align: center;
  height: 700px;
}

.mobilelinks {
  display: none;
}

.wrapper {
  margin: 50px;
}

#footer {
  text-align: center;
}

#footer a {
  color: #666;
  margin-left: 8px;
}

#footer a:hover {
  color: #222;
  text-decoration: underline;
}

h1 {
  color: white;
  font-family: Arial;
  font-size: 72px;
  letter-spacing: 1px;
}

h2 {
  color: #525252;
  font-size: 36px;
  letter-spacing: 1px;
  text-align: center;
}

p {
  font-family: Gill Sans, sans-serif;
  color: #696969;
  font-size: 17px;
  text-align: center;
  line-height: 150%;
}

a {
  color: white;
  text-decoration: none;
}

ul li {
  text-align: center;
  line-height: 40px;
  display: inline-block;
  letter-spacing: 1px;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 90%;
  width: 150px;
  height: 40px;
  margin-left: 11%;
  margin-top: 12%;
}

ul li:hover {
  background-color: white;
}

ul li:hover > a {
  color: #000;
}

@media screen and (max-width: 750px) {
  .header {
    height: 100vh; /* OR USE AUTO */
    
  }
  ul li {
    margin-top: 0%;
  }
  ul li {}
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 52px;
  }
  ul li {
    margin-top: 0%;
  }
  .links {
    display: none;
  }
  .mobilelinks {
    display: inline-block;
  }
}

@media screen and (max-width: 400px) {
  .header {
    height: 100vh; /* OR USE AUTO */
  }
  ul li {
    margin-top: 0%;
  }
  .mobile-terms {
    display: none;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 22px;
  }
}

color: #000;

}
@media screen and (max-width: 750px) {
  .header {
    height: 100vh; /* OR USE AUTO */
  }
  
  ul li {
    margin-top: 0%;
  }
}
@media screen and (max-width: 500px) {
  h1 {
    font-size: 52px;
  }
  
  .links {
    display: none;
  }
  
  ul li {
    margin-top: 0%;
  }
  
  .mobilelinks {
    display: inline-block;
  }
}
@media screen and (max-width: 400px) {
  .header {
    height: 100vh; /* OR USE AUTO */
  }
  
  .mobile-terms {
    display: none;
  }
  
  h1 {
    font-size: 36px;
  }
  
  h2 {
    font-size: 22px;
  }
  
  ul li {
    margin-top: 0%;
  }
}
<div class="header">
  <h1>WHO I AM</h1>
  <ul class="links">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
  <ul class="mobilelinks">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>
<div id="mainwrapper">
  <div class="wrapper">
    <h2>Some Fun Facts</h2>
    <p>
      I made this website from scratch when I was 14,
      <br> I have a twin brother whose name is Pierson McNeal White,
      <br> I have a older brother and sister who are also twins,
      <br> I used to have 2 pet rats named Hermes and Cleo after the greek gods,
      <br> and I watch the super bowl for the ads.
    </p>
  </div>
  <hr>
  <div class="wrapper">
    <h2>Me In A Nutshell</h2>
    <p>
      Other Crap Here.
    </p>
  </div>
</div>
<div id="footer">
  Copyright &copy;&nbsp;
  <script>
    document.write(new Date().getFullYear())

  </script>&nbsp;Morgan.
  <div>
    <a href="#">Link</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
  </div>
</div>
<div class="header">
  <h1>WHO I AM</h1>
  <ul class="links">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
  <ul class="mobilelinks">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>
<div id="mainwrapper">
  <div class="wrapper">
    <h2>Some Fun Facts</h2>
    <p>
      I made this website from scratch when I was 14,
      <br> I have a twin brother whose name is Pierson McNeal White,
      <br> I have a older brother and sister who are also twins,
      <br> I used to have 2 pet rats named Hermes and Cleo after the greek gods,
      <br> and I watch the super bowl for the ads.
    </p>
  </div>
  <hr>
  <div class="wrapper">
    <h2>Me In A Nutshell</h2>
    <p>
      Other Crap Here.
    </p>
  </div>
</div>
<div id="footer">
  Copyright &copy;&nbsp;
  <script>
    document.write(new Date().getFullYear())

  </script>&nbsp;Morgan.
  <div>
    <a href="#">Link</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
  </div>
</div>

关于jquery - 如何让我的按钮在我的网站中向下移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35325724/

上一篇：css - 我正在尝试以响应方式对齐两篇文章的图像。容器的高度未知。我该怎么做呢？

下一篇：javascript - 图表交互指南默认为光标另一侧的最远值

相关文章：

javascript - 已动态添加到 DOM 的元素的第一个实例的选择器

html - Mozilla 上的 CSS 动画问题

jquery - CSS导航悬停效果

javascript - 出现时 JQuery "Chosen"下拉菜单被 chop

jquery - 缩小整个 WordPress 网站

html - 网页中不需要的填充字母

jquery - 发送数据的 jQuery ajax post 请求是什么格式，如何通过 Flask 的请求对象访问它？

jQuery:如何通过 src 查找图像

jquery - Google map v3 在左上角部分加载，调整大小事件不起作用

html - 添加背景图像时列表项将添加类时事件

©2024 IT工具网  联系我们