如何在一行中添加标签和输入 (HTML)

Question

我正在尝试制作一个两个标签并在一行中输入任何人都可以帮助我构建这样的表单。 我想让这个像这个图像。 我需要在标签下方输入，并将它们放在一行图像中

 .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

Answer 1

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

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>

Answer 2

您是要让标签出现在输入字段旁边，还是让输入字段并排显示，如图片中所示？

如果您正在使用引导程序，您可能会发现此解决方案很有帮助：在 twitter bootstrap 中水平表单内的表单内联？

如何在一行中添加标签和输入 (HTML)

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-10 05:12:57

解决方案2
0 2020-03-10 05:14:10

如何在一行中添加标签和输入 (HTML)

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-10 05:12:57

解决方案2 0 2020-03-10 05:14:10

解决方案1
1 已采纳 2020-03-10 05:12:57

解决方案2
0 2020-03-10 05:14:10