同一行中的文本字段HTML

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

这是我的代码：

<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>

来源

2017-06-05 Fyp16

您是否期待在同一列或行中？ – lalithkumar

这是默认。 input是内联元素。

<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>

在引导你可以把所有你想在一个单一的形式，组内的单行

<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>

来源

2017-06-05 04:23:36 Alex78191

你可以使用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>

使用展开片断看到实际效果。

来源

2017-06-05 04:30:33 Alexander

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

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

否则，这些添加CSS属性<form>，

display: inline-block; 
width: auto;

来源

2017-06-05 04:46:34

使用引导：

<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>

来源

2017-06-05 04:55:45

-1

你可以尝试过这种方式。

<!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>

来源

2017-06-05 04:57:36 Nishan256

内联样式不是维护页面的最佳方式。 – Alexander

同一行中的文本字段HTML

回答

相关问题