如何在一行中添加“To”标签和输入框（HTML）

6 浏览
0 Comments

如何在一行中添加“To”标签和输入框（HTML）

我想在一行中创建一个带有两个标签和输入框的表单，有人可以帮我实现吗？我希望效果如下图所示。我需要将输入框放在标签下方，并且在同一行显示。\nCSS代码如下：\n

.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;
}

\nHTML代码如下：\n




	form



	
个人详情

\n图片参考链接：[图片](https://i.stack.imgur.com/Muvyh.png)

0

2 答案

0 Comments

你想要让标签出现在输入框旁边，还是让输入框像你的图片中那样并排显示？

如果你正在使用bootstrap，你可能会发现这个解决方案有帮助：Form inline inside a form horizontal in twitter bootstrap?

我想要实现和图片一样的效果。

0
0 Comments

问题的出现原因：需要使用CSS来实现表单的样式。

解决方法：通过CSS对表单进行样式设置，使其满足要求。

以下是一个根据要求创建的JSFiddle示例代码：

CSS代码如下：

.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代码如下：

通过对CSS进行修改，我为SELECT元素添加了支持。请给这个回答点赞。

你可以在以下链接中查看示例代码：

[https://jsfiddle.net/rajeevRF/8vu73Lso/8/](https://jsfiddle.net/rajeevRF/8vu73Lso/8/)

0