Question

如何在同一行中创建多个文本字段。

这是我的代码：

<div class="col-lg-2">
    <div class="form-group">
        <label>Working experience</label>
        <input type="text" class="form-control  " placeholder="Year"/>Year 
        <input type="text" class="form-control " placeholder="Month"/>Month
        <input type="text" class="form-control  " placeholder="Day" />Day
    </div>            
</div>

Answer 1

默认情况下。 input是内联元素。

＆＃13;

<div class="col-lg-2">
  <div class="form-group">
    <label>Working experience</label>
    <input type="text" class="form-control  " placeholder="Year" />Year
    <input type="text" class="form-control " placeholder="Month" />Month
    <input type="text" class="form-control  " placeholder="Day"

Day
  </div>
</div>

＆＃13;

在bootstrap中，您可以将所需的所有字段放在单个表单组中的单行上

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>

＆＃13;

Answer 2

您可以使用inline form类。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <form class="form-inline">
    <div class="form-group">
      <label>Working experience</label>
      <input type="text" class="form-control" placeholder="Year">
      <input type="text" class="form-control" placeholder="Month">
      <input type="text" class="form-control " placeholder="Day">
    </div>
  </form>

使用展开代码段查看实际结果。

Answer 3

看来，你正在使用Bootstrap，如果是，那么;

将班级.form-inline添加到<form>元素。

否则，将这些css属性添加到<form>，

display: inline-block;
width: auto;

Answer 4

使用Bootstrap：

<form class="form-inline" action="/action_page.php">
  <label>Working experience : </label>
  <div class="form-group">
      <input type="text" class="form-control" id="year" placeholder="Year" name="year">
  </div>

  <div class="form-group">
      <input type="text" class="form-control" id="month" placeholder="Month" name="month">
  </div>
  <div class="form-group">
      <input type="text" class="form-control" id="day" placeholder="Day" name="day">
  </div>
</form>

Answer 5

您也可以尝试这种方式。

<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div class="col-lg-2">
    <div class="form-group" >
        <label style="width:25%; float:left;">Working experience</label>
         <div style="width:25%; float:left;">
            <input type="text" class="form-control  " placeholder="Year"/>Year
         </div>
         <div style="width:25%;  float:left;">
            <input type="text" class="form-control " placeholder="Month"/>Month
         </div>
         <div style="width:25%;  float:left;">
            <input type="text" class="form-control  " placeholder="Day"/>Day
         </div>
    </div>            
</div>
</body>

</html>

同一行HTML中的文本字段

5 个答案: