如何在一行中添加到标签和输入（HTML）

debugcn 发表于 Dev

AN-锡兰

我正在尝试制作“两”标签，然后在一行中输入内容，任何人都可以帮助我构建此类表格。我想使它像这张图片。我需要在标签下方输入内容，并在一行中输入图像

.first_line_left,.first_line_right,.first_line_right_far{
	float: left;width:50%;box-sizing: border-box;
}
label,input{
	width:10%,float:left;box-sizing:border-box;
}
input{
	padding: 8px 10px;box-sizing: border-box;
}
.first_line_left,.first_line_right,.first_line_right_far{
	width: 33.33%;float: left;padding: 10px;
	box-sizing: border-box;
}

<!DOCTYPE>
<html>
<head>
	<title>form</title>
</head>
<link rel="stylesheet" type="text/css" href="form.css">
<body>
	<h1>Personal Details</h1><hr>
<form action="" method="post">

<div class="First_line_left">
	<label for="title">Title</label>
	<select>
		<option value="0"></option>
		<option value="Mr">Mr</option>
		<option value="Miss">Miss</option>
		<option value="Mrs">Mrs</option>

	</select>
</div>
<div class="First_line_right">
	<label for="Delegate_First_name">Delegate First</label>
	
<input type="text" name="Delegate_First_name" placeholder="Delegate First name">
</div>
<div class="First_line_right_far">
<label for="Delegate_last_name">Delegate last Name</label>
<input type="text" name="Delegate_last_name" placeholder="Delegate last Name">
</div>


</div>

</div>
</form>
</body>
</html>

mgur.com/Muvyh.png

拉杰夫

您需要使用CSS来制作这样的表单样式。我根据您的要求在JS小提琴中创建了一个示例代码。

https://jsfiddle.net/rajeevRF/8vu73Lso/8/

.left_half,.right_half{width:50%;float:left;padding:10px;box-sizing: border-box;}
label,input,select{width:100%;float:left;box-sizing: border-box;}
input{padding:8px 10px;box-sizing: border-box;}
.first_left,.first_center,.first_right{width:33.33%;float:left;padding:10px;box-sizing: border-box;}

<html>
<form action="" method="post">
<div class="left_half">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="right_half">
<label>Phone</label>
<input type="text" name="phone" placeholder="Enter your phone">
</div>
<div class="first_left">
<label>Email</label>
<input type="text" name="email" placeholder="Enter your email">
</div>
<div class="first_center">
<label>Comments</label>
<input type="text" name="comment" placeholder="Enter your comment">
</div>
<div class="first_right">
<label>Subject</label>
<input type="text" name="subject" placeholder="Enter your subject">
</div>
</form>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。