时间戳

首页 > 解决方案 > 如何将元素移动到页面下方？

html - 如何将元素移动到页面下方？

问题描述

我想移动到文本区域以与其他字段对齐，然后将所有这些字段移动到文本“随意......”的下方，我试图使用 marigin-left，margin-top，但没有任何效果。这些领域一直都在一个地方。不知道为什么。它必须在 ip 6/7/8 plus 分辨率下工作。

在此处输入图像描述

你能告诉我如何实现它吗？

* {
  margin: 0;
  padding: 0;
}

header {
  width: 1920;
  height: 1080px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  height: 1080px;
  background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

footer img {
  margin-top: 5px;
  height: 30px;
  display: inline-block;
  padding: 0px 10px 0px 0px;
}

.main-nav {
  float: right;
  color: #000000;
  margin-top: 40px;
  margin-right: 0px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: #000000;
  text-decoration: none;
  font: Bold 25px/15px Arial;
  padding: 5px;
}

#logo {
  margin-top: 10px;
  float: left;
}

#tekst {
  position: absolute;
}

#sign a {
  background-color: #DCDFDE;
  padding: 30px 15px 17px 15px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
}

#profilesign {
  margin-top: 400px;
  margin-left: 250px;
  font: Bold 40px/40px Georgia;
  letter-spacing: 0;
  color: black;
}

.left {
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 150px 150px;
}

img.left {
  padding: 0px 40px 20px 40px;
  width: 250px;
  height: 250px;
  margin-left: 400px;
  margin-top: 500px;
}

article input {
  width: 300px;
  height: 40px;
  background: white;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font: Bold 25px/12px Arial;
  border-radius: 120;
  border-style: none;
  padding: 6px;
  margin-left: 1000px;
  margin-top: 500px;
}

article #textSign {
  font-size: 50px;
  color: black;
  text-align: center;
}

#centerText {
  text-align: center;
}

#something {
  width: 700px;
  height: 300px;
  text-align: justify;
  margin-left: 1000px;
  font-size: 30px;
  font-weight: bold;
}

@media only screen and (max-device-width: 500px) {
  #profilesign {
    width: 1000px;
    margin-top: 750px;
    margin-left: 400px;
    font: Bold 60px/40px Georgia;
    letter-spacing: 0;
    color: black;
  }
  img.left {
    padding: 0px 40px 20px 40px;
    width: 550px;
    height: 550px;
    margin-left: 550px;
    margin-top: 450px;
  }
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: black;
    color: white;
    text-align: center;
  }
  footer img {
    margin-top: 5px;
    height: 50px;
    display: inline-block;
    padding: 0px 10px 0px 0px;
  }
  #sign a {
    background-color: #DCDFDE;
    padding: 20px 15px 17px 1px;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    border-right: 3px solid black;
  }
  #logo img {
    margin-left: 550px;
    text-align: center;
    width: 650px;
  }
  body {
    background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
    background-size: 100% 3000px;
    width: auto;
  }
  .row {
    width: 2500px;
    display: grid;
    grid-template-columns: 0% 80%;
  }
  .main-nav {
    margin-left: 100px;
    margin-top: 250px;
    float: left;
    display: inline-flex;
    list-style: none;
  }
  .main-nav li a {
    border-right: 3px solid black;
    color: #000000;
    text-decoration: none;
    font: Bold 58px/45px Arial;
  }
  #something {
    width: 700px;
    height: 300px;
    text-align: justify;
    margin-top: 200px;
    font-size: 30px;
    font-weight: bold;
  }
  article input {
    width: 400px;
    height: 70px;
    background: white;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font: Bold 45px/12px Arial;
    border-radius: 120;
    border-style: none;
    padding: 6px;
    margin-left: 700px;
  }
}
<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <title>DingDog</title>
  <link rel="stylesheet" href="css-images/style-contact.css">
</head>

<body>
  <header>
    <div class="row">
      <ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>

      <ul class="main-nav">
        <li style="padding-left:10px"><a href="profile.html">PROFILE</a></li>
        <li style="padding-left:10px"><a href="">MAP</a></li>
        <li style="padding-left:10px"><a href="">YOUR FRIENDS</a></li>
        <li style="padding-left:10px"><a href="">MAILBOX</a></li>
        <li style="padding-left:10px" id="sign"><a href="index.html">LOG OUT</a></li>
      </ul>
    </div>

    <section>
      <article>
        <p id="profilesign">Feel free to send us a question.</p>
        <img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
        <div id="lala">
          <p id="centerText">
            <label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
            <label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
            <label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
          <textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
        </div>
        <label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
      </article>
    </section>
  </header>
  <footer>
    <img src="social/instagram.png" />
    <img src="social/twitter-white-logo.png" />
    <img src="social/facebook.png" />
  </footer>
</body>

</html>

标签： htmlcss

解决方案

推荐阅读