如何将文本从表单框的顶部移开？

时间：2016-11-15 05:25:26

标签： html css

我想要做的就是从表单顶部向下放一个表单，这样它就不会坐在顶部，我尝试使用padding-top移动它虽然它什么也没做，所以有另一种方法可以将其降低吗？这是我的代码，

＆＃13;
＆＃13; 
 
    <html>
    <style> 
    #form{float: left;
      position: relative;
      left: 37%;
      border-style: solid;
      border-color:3px black;
      width: 250px;}
    dt1{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;
    }

    dt2{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt3{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt4{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt5{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt6{color:red;
	padding-left: 37px;}

    #submit{background-color: white;
            float: left;
      		position: relative;
      		left: 33%;
            color: black;
            font-family: Helvetica;
            font-weight: bold;
            font-size: 20px;
            border: 1px solid #000000;
            margin-bottom: 20px;
            transition-duration: 0.4s;
            -webkit-transition-duration: 0.4s; <!-- login button-->}
    #submit:hover{background-color: #000000;
     		color: white;
            border: 1px solid white;}
    </style>
    <form method="post" id="form">
	<d1>
		<dt1>Choose a Username:</dt1>
		<dd><input name="username" type="text" id="username"></dd>

		<dt2>Enter your Email:</dt2>
		<dd><input name="email" type="text" id="email"></dd>

		<dt3>Choose a Display Name:</dt3>
		<dd><input name="display_name" type="text" id="displayname"></dd>

		<dt4>Choose your Password:</dt4>
		<dd><input name="password1" type="password" id="password1"></dd>
		<dt5>Confirm Password:</dt5>
		<dd><input name="password2" type="password" id="password2"></dd>

		<dt6><%= @error_message %></dt6>
	</d1>
	<p><input type="submit" value="Submit" id="Submit"></p>
    </form>
    </html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

 
    <html>
    <style> 
    #form{float: left;
      position: relative;
      left: 37%;
      border-style: solid;
      border-color:3px black;
      width: 250px;
      padding:30px 0px;  
}
    dt1{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;
    }

    dt2{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt3{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt4{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt5{font-family: helvetica;
	font-weight: bold;
	padding-left:37px;}

    dt6{color:red;
	padding-left: 37px;}

    #submit{background-color: white;
            float: left;
      		position: relative;
      		left: 33%;
            color: black;
            font-family: Helvetica;
            font-weight: bold;
            font-size: 20px;
            border: 1px solid #000000;
            margin-bottom: 20px;
            transition-duration: 0.4s;
            -webkit-transition-duration: 0.4s; <!-- login button-->}
    #submit:hover{background-color: #000000;
     		color: white;
            border: 1px solid white;}
    </style>
    <form method="post" id="form">
	<d1>
		<dt1>Choose a Username:</dt1>
		<dd><input name="username" type="text" id="username"></dd>

		<dt2>Enter your Email:</dt2>
		<dd><input name="email" type="text" id="email"></dd>

		<dt3>Choose a Display Name:</dt3>
		<dd><input name="display_name" type="text" id="displayname"></dd>

		<dt4>Choose your Password:</dt4>
		<dd><input name="password1" type="password" id="password1"></dd>
		<dt5>Confirm Password:</dt5>
		<dd><input name="password2" type="password" id="password2"></dd>

		<dt6><%= @error_message %></dt6>
	</d1>
	<p><input type="submit" value="Submit" id="Submit"></p>
    </form>
    </html>

答案 1 :(得分：0)

有太多的错误要跟踪，所以我会触及明显的错误：

|的错误的 | ~~~~~~~~~~ | 从右 |

<d1... ~~~~~~~~~~ <dl...

<dt2...6 ~~~~~~~~~ <dt...

顶部没有<head> ~~~~~~~~ <head>...</head>

头

之后没有<body> ~~~~~~~ <body>...</body>

dt1....dt6 ~~~~~~~~ .d1到.d6这些是<style>

中的一个类

如果您具备HTML / CSS的基本知识，那么简单的事情就很少成为问题。

段

<!DOCTYPE html>

<html>

<head>
  <style>
    #form {
      float: left;
      position: relative;
      padding: 25px 0 15px;
      left: 37%;
      border-style: solid;
      border-color: 3px black;
      width: 250px;
    }
    .d1,
    .d2,
    .d3,
    .d4,
    .d5 {
      font-family: helvetica;
      font-weight: bold;
      padding-left: 37px;
    }
    .d6 {
      color: red;
      padding-left: 37px;
    }
    #submit {
      background-color: white;
      float: left;
      position: relative;
      left: 53%;
      color: black;
      font-family: Helvetica;
      font-weight: bold;
      font-size: 20px;
      border: 1px solid #000000;
      margin-left: 5px;
      margin-bottom: 10px;
    }
    #submit:hover {
      background-color: #000000;
      color: white;
      border: 1px solid white;
    }
  </style>
</head>

<body>
  <form method="post" id="form">
    <dl>
      <dt class='d1'>Choose a Username:</dt>
      <dd>
        <input name="username" type="text" id="username">
      </dd>
      <dt class='d2'>Enter your Email:</dt>
      <dd>
        <input name="email" type="text" id="email">
      </dd>
      <dt class='d3'>Choose a Display Name:</dt>
      <dd>
        <input name="display_name" type="text" id="displayname">
      </dd>
      <dt class='d4'>Choose your Password:</dt>
      <dd>
        <input name="password1" type="password" id="password1">
      </dd>
      <dt class='d5'>Confirm Password:</dt>
      <dd>
        <input name="password2" type="password" id="password2">
      </dd>
      <dd class='d6'></dd>
    </dl>
    <p>
      <input type="submit" id="submit">
    </p>
  </form>
</body>

</html>

答案 2 :(得分：0)

让我们从清除一些要点开始：

正确的HTML标记为<dl>（D和L）不 <d1>（D和1）。

  

HTML <dl>元素（或HTML描述列表元素）包含一个   一对术语和描述的列表。此元素的常见用途   是实现词汇表或显示元数据（列表   键值对）。

description list元素可以包含：

  

HTML <dt>元素（或HTML定义术语元素）标识一个   术语在定义列表中。此元素只能作为孩子出现   一个元素。它通常后跟一个元素;然而，   连续的多个元素表示几个术语   由下一个元素定义。

  

HTML <dd>元素（HTML描述元素）表示   描述list（）元素中术语的描述。这个   element只能作为描述列表的子元素才能出现   必须遵循一个元素。

设置的padding无效，因为无法识别的HTML标记显示为inline。您可以阅读this以了解正在发生的事情。

纠正标签会让你得到你想要的。我们将向第一个<dt>元素添加填充，但如果您将padding添加到form元素而不是其子元素，则会更好。

#form {
  float: left;
  position: relative;
  left: 37%;
  border-style: solid;
  border-color: 3px black;
  width: 250px;
}
dt {
  font-family: helvetica;
  font-weight: bold;
  padding-left: 37px;
}
dt:first-of-type {
  padding-top: 20px;
}
dt:last-of-type {
  color: red;
}
#submit {
  background-color: white;
  float: left;
  position: relative;
  left: 33%;
  color: black;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid #000000;
  margin-bottom: 20px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  <!-- login button-->
}
#submit:hover {
  background-color: #000000;
  color: white;
  border: 1px solid white;
}
<form method="post" id="form">
  <d1>
    <dt>Choose a Username:</dt>
    <dd>
      <input name="username" type="text" id="username">
    </dd>

    <dt>Enter your Email:</dt>
    <dd>
      <input name="email" type="text" id="email">
    </dd>

    <dt>Choose a Display Name:</dt>
    <dd>
      <input name="display_name" type="text" id="displayname">
    </dd>

    <dt>Choose your Password:</dt>
    <dd>
      <input name="password1" type="password" id="password1">
    </dd>
    <dt>Confirm Password:</dt>
    <dd>
      <input name="password2" type="password" id="password2">
    </dd>
    <dt>
      @ error_message
    </dt>
  </d1>
  <p>
    <input type="submit" value="Submit" id="submit">
  </p>
</form>

相关问题
最新问题