如何通過html對齊標籤和文本框？

使用下面的代碼，摘要和它的文本框是內嵌對齊的。但描述文本框出現在標籤'description'的下面。我怎樣才能讓它內聯對齊？請幫我解決這個問題。如何通過html對齊標籤和文本框？

.left { 
 
     width: 30%; 
 
     float: left; 
 
     text-align: right; 
 
    } 
 
    .right { 
 
     width: 65%; 
 
     margin-left: 10px; 
 
     float: left; 
 
    }

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2"> 
 
     <h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1> 
 
     <form action="post" class="login-form"> 
 
      <div> 
 
      <label class="left">Summary:</label> 
 
      <input class="right" type="text" name="Summary" size="50"> 
 
      </div> 
 
      <div> 
 
      <label class="left">Description:</label> 
 
      <input class="right" type="text" name="Description" style="height:100px;width:400px"> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2016-03-03 Rahul

你的意思是將其調整到中間，垂直？ –

不，我希望標籤和它的文本框水平顯示（即文本框應顯示在標籤旁邊）。 – Rahul

樣式與標籤的div和輸入向左浮動 –

嘗試這樣的：Demo

如果你需要多行text中，使用textarea而不是輸入型text

<div class="form-group row"> 
    <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label> 
     <div class="col-md-6 col-sm-12"> 
     <input type="text" class="form-control" name="Summary" size="50"> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label> 
     <div class="col-md-6 col-sm-12"> 
     <textarea class="form-control" name="Description"></textarea> 
     </div> 
    </div>

編輯：

正如你提到的，它不是form-control類，它的form-control-label ..你可以得到更多的信息here

更新Demo：要改變高度，嘗試<textarea>

來源

2016-03-03 09:11:17

這看起來不錯。謝謝！但箱子的大小非常小......我可以如何增加它們？ – Rahul

@Rahul：你想增加哪個箱子尺寸？你可以根據你的要求調整col-md-6到1到12列的任何值 –

非常感謝:)它爲我工作。順便說一句，你能讓我知道在標籤標籤中使用'表格控制'嗎？我不確定。 – Rahul

喜歡這個？
https://jsfiddle.net/d6tscd18/

.left { 
    width: 30%; 
    display: inline-block; 
    text-align: right; 
} 
.right { 
    width: 65%; 
    margin-left: 10px; 
    display: inline-block; 
}

來源

2016-03-03 09:11:08

儘管它在小提琴中正確顯示，但它在瀏覽器中是不正確的。即使描述框在標籤下面 – Rahul

您使用哪種瀏覽器不會有什麼區別嗎？ –

am使用鍍鉻 – Rahul

如果chnaging的rows="8"值你正在使用Bootstrap（就像你的代碼中的類一樣）。我會建議使用他們的表單佈局選項。聽起來像是你想有一個橫向形態：

Docs

例如：從描述的輸入

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="summary" class="col-sm-2 control-label">Summary</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="summary" /> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="description" class="col-sm-2 control-label">Description</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="description" style="height:100px;width:400px" /> 
    </div> 
    </div>  
</form>

來源

2016-03-03 09:12:12 Starscream1984

<input class="right" type="text" name="Description" style="height:100px;width:400px;">

刪除寬度，也請切換到文本區域，而不是輸入。

來源

2016-03-03 09:16:12

使用textarea後，所有的代碼默認顯示在描述文本框中 – Rahul

試試這個：

<html> 
    <head> 
    <title>sample</title> 
    <style type="text/css"> 
     .left { 
      width: 30%; 
      display: inline-block; 
      text-align: right 
     } 
     .right { 
      margin-left: 10px; 
      display: inline-block; 
     } 
    </style> 

    </head> 

    <body> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2"> 
      <h1 class="text-center" style="font-family:Colonna MT;font-     size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1> 
<form action="post" class="login-form"> 
     <div> 
     <label class="left">Summary:</label> 
     <input class="right" type="text" name="Summary" size="50" style="width:400px"> 
     </div> 
    <div> 
     <label class="left">Description:</label>  
     <input class="right" type="text" name="Description" style="height:100px;width:400px"> 
    </div> 
</form> 
    </div> 
</div> 
</div> 
</body> 
</html>

來源

2016-03-03 09:17:01

這是內聯的垂直方向，太不適當了。請回顧一次。 – Rahul

您已經使用引導framework.so沒有必要寫額外的CSS內嵌形式。遵循下面的代碼

<div class="form-group"> 
    <label class="col-lg-3 control-label ">City</label> 
     <div class="col-lg-9"> 
     <div class="form-inline"> 
      <div class="form-group "> 
      <div class="col-lg-12"> 
       <label class="sr-only" for="city">City</label> 
       <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" > 
      </div> 
      </div> 
      <div class="form-group "> 
      <div class="col-lg-12"> 
       <label class="sr-only" for="county">County</label> 
       <input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" > 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>

來源

2016-03-03 09:34:49

如果你有麻煩它在的地方，你也可以強制表的佈局，而無需使用表：

.login-form { 
    display: table; 
} 
.login-form>div { 
    display: table-row; 
} 

.cell { 
    display:table-cell; 
    vertical-align: top; 
} 
...

添加圍繞輸入一個div和「細胞」類（並且它不應該是一個textarea）：

... 
<form action="post" class="login-form"> 
    <div> 
     <label class="left cell">Summary:</label> 
     <div class="cell"> 
      <input class="right" type="text" name="Summary" size="50"> 
     </div> 
    </div> 
    <div> 
     <label class="left cell">Description:</label> 
     <div class="cell"> 
      <textarea class="right" name="Description" style="height:100px;width:400px"></textarea> 
     </div> 
    </div> 
</form> 
...

Check it here

來源

2016-03-03 09:42:54 jazZRo

從描述輸入類型中刪除樣式屬性，它將顯示爲摘要輸入框。

<form action="post" class="login-form"> 
    <div> 
    <label class="left">Summary:</label> 
    <input class="right" type="text" name="Summary" size="50" style="width:400px"> 
    </div> 
<div> 
    <label class="left">Description:</label>  
    <input class="right" type="text" name="Description">

來源

2016-03-03 10:52:39 Gyan

如何通過html對齊標籤和文本框？

回答

相關問題