HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
Имя: и поле ввода находятся в одной строке, а следующая строка просто касается.
как я их разделяю.
Добавьте line-height
в div
как div
ниже:
div{
line-height: 30px;
}
Примечание. Здесь я применил свойство для тега div
вообще, поскольку это только пример. В этом случае вы можете добавить class
для тегов div
пределах fieldset
и применить line-height
только для этого класса. Выполняя это, убедитесь, что другие теги div
на странице не затронуты.
добавьте ниже css в свой код
div{
margin-top:10px;
}
вы можете изменить маржу как свое требование.
не становясь слишком сложным, что-то простое, поскольку следующее приведет к желаемым результатам
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
это дает вашим полям ввода небольшое пространство, чтобы они были распределены.
Примечание. Я использовал специальные селекторы для применения этих значений только к полям только вашего примера.
Существует много способов реализовать это. Самый простой способ - просто вставить <BR> между меткой и тегом ввода.
Второй способ - использовать таблицу и поместить ввод в ячейку ниже.
Альтернативный способ - использовать, например, divs и поместить ярлык в один div и вход в другой и использовать методы css, такие как float и т.д. Это имеет преимущество управления всем через css.