html - 如何将输入标签中的文本移至更高位置并在到达末尾行时输入？

标签 html css

我有输入标签，其中可能有很多文本。 how it looks now

我想在左上角有这个'Type something'。更重要的是，当我们接近右边界(结束线)时，我想有一个输入。目前它看起来像这样: not making enter when reaching end line

我想进入那里。

您能告诉我如何进行这两项改进吗？

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  height: 1080px;
  width: auto;
  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;
}

#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;
}
<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>
        <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>
        <label><input type="something" name="something" placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></label><br></p>
        <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>
      </div>
    </article>
  </section>
</header>
<footer>
  <img src="social/instagram.png" />
  <img src="social/twitter-white-logo.png" />
  <img src="social/facebook.png" />
</footer>

最佳答案

我建议为此使用文本区域。我也对 CSS 做了一些修改

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  height: 1080px;
  width: auto;
  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;
}

#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,
article textarea {
  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: 300px;
  height: 150px;
  text-align: justify;
}
<!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>
          <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>
          <label><textarea name="something" placeholder='Type something' id="something"  cols="50" rows="15" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea></label><br>
          <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>
        </div>

      </article>
    </section>
  </header>
  <footer>
    <img src="social/instagram.png" />
    <img src="social/twitter-white-logo.png" />
    <img src="social/facebook.png" />
  </footer>
</body>

</html>

关于html - 如何将输入标签中的文本移至更高位置并在到达末尾行时输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59754845/

上一篇：html - 响应式缩放绝对定位的元素

下一篇：php - 我想在 WordPress 的 CSS 中添加背景图片

相关文章：

css - 使用缩放元素跨浏览器居中

javascript - 如何定位html元素内文本的中心

javascript - topfunction 未定义

javascript - 为什么我的网站屏幕分辨率与移动设备的屏幕尺寸不匹配？

php - 双 if 与数据库查询

java - 从 HTML 中获取 href 标签

html - 如何同时翻转多个div？

css - 如何让表格单元格右对齐？

javascript - 忽略 "style"属性获取 div 的宽度和高度

javascript - 如何在已完成的菜单中为关闭的 Accordion 默认设置自定义脚本

©2024 IT工具网  联系我们