个人中心
gpt4 book ai didi

html - 输入中占位符的行高不会移动到顶部

转载 作者：太空宇宙 更新时间：2023-11-03 20:12:49 25 4
gpt4 key购买 nike

我一直在尝试使用行高、所有浏览器的格式输入、填充、垂直对齐等等，但我的占位符仍然在框的中间。有什么建议吗？

但是，我尝试在 jsfiddle 中测试我的代码，看看它是否只是我的 css 文件；结果是一样的。

http://jsfiddle.net/f0o4bcnv/ 

#postdoc {
   background-color: gray;
   width: 780px;
   height: 500px;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid black;
   margin-top: 30px;
   margin-left: 30px;
   padding-top: 30px;
   float: right;
 }
 #postdoc label {
   float: left;
   width: 200px;
   text-align: right;
   margin-right: 10px;
   padding-left: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   font-size: 25px;
   margin-bottom: 30px;
   margin-left: 20px;
 }
 #postdoc input[type="text"] {
   margin-bottom: 30px;
   height: 300px;
   width: 500px;
   font-size: 20px;
   margin-left: 10px;
   box-shadow: 0 0 5px black;
   vertical-align: top;
   /*padding-top: 0;*/
   /*line-height: normal;*/
   /*line-height: none;*/
   /*vertical-align: top;*/
   /*-webkit-input-placeholder: line-height: 1.5em;
	-moz-placeholder: line-height: 1.5em;
	-moz-placeholder: line-height: 1.5em;
	-ms-input-placeholder: line-height: 1.5em;*/
 }
 #postdoc input[type="file"] {
   margin-bottom: 30px;
   height: 50px;
   width: 500px;
   font-size: 20px;
   margin-left: 10px;
   box-shadow: 0 0 5px black
 }
 #postdoc input[type="submit"] {
   margin-bottom: 30px;
   height: 45px;
   width: 250px;
   font-size: 30px;
   margin-right: 100px;
   float: right;
   background-color: #4EA24E;
   color: blue;
   border-radius: 5px;
   text-shadow: 0 0 10px yellow;
   box-shadow: 0 0 10px black;
   font-family: Rockwell, 'Courier Bold', serif;
 }
 #postdoc input[type="submit"]:hover {
   color: gold;
 }
<!DOCTYPE html>

<html>


<head>
  <link rel="stylesheet" href="prostylesheet.css" type="text/css">

  <meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>


<body>
  <h1 class="name"><font color = "#3399FF"> Prog-Assist |  </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>

  <div id="header">
    <div id="gradient">
      <div class="nav">

        <!-- container-fluid gives full width container of whole viewport -->

        <div class="container-fluid">


          <ul id="nav1" class="text-left">
            <li><a href="main.html"><strong>Home</a>
            </li>
            <li><a href="tech.html">Technologies</a>
            </li>
            <li><a href="programsPage.html">Programs</a>
            </li>
            <li><a href="#">Blog</strong></a>
            </li>
          </ul>

          <ul id="nav2" class="text-right">
            <li><a href="#"><strong>Sign In</a>
            </li>
            <li><a href="#">Contact</strong></a>
            </li>
          </ul>

        </div>
        <!-- end container-fluid-->

      </div>
      <!--end nav-->
    </div>
  </div>
  <!-- end header -->


  <form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">

    <label>Comment:</label>
    <input type="text" name="comment" placeholder="Comments">
    <br>

    <label>Text Document:</label>
    <input type="file" name="documentfile" />
    <br>

    <input type="submit" name="submit" value="Post comment" class="button">

  </form>


</body>

</html>

最佳答案

对于这种情况(多行)，您应该使用 textarea:

<textarea style="height: 500px; width: 100%;">
 Comments
</textarea>

注意:输入元素只支持单行。

关于html - 输入中占位符的行高不会移动到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27844051/

25 4 0
文章推荐： Python Pandas : add list to df of different len
文章推荐： c# - 合并具有公共(public)元素的数组
文章推荐： c# - 将自定义命令设置为以编程方式创建的按钮
文章推荐： c# - 带有 slider 绑定(bind)的 TranslateTransform 不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com