同一行中的文本字段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

回答

相關問題