使用CSS對齊兩個文本輸入元素

-1

對不起，如果這是一個基本問題，但我該如何左對齊不同長度的標籤不同div中的兩個文本框元素？我有一個屏幕截圖。我想對齊「潛水個人資料ID」和「潛水個人資料名稱」的文本框。我現在擁有的方式是「潛水個人資料ID」和「描述」標籤和文本框位於一個div中，「潛水個人資料名稱」位於另一個div中。我將如何對齊這兩個輸入元素？使用CSS對齊兩個文本輸入元素

enter image description here

這裏是我的實際HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <LINK href="dive.css" rel="stylesheet" type="text/css"> 

    </head> 
    <body> 
     <div id="main" > 
      <div id="header"> 
       <form name="header"> 
        <div id="topline"> 
         <label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId"> 
         <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea> 
        </div> 
        <div id="secondline"> 
         <label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName"> 
        </div> 
       </form> 
      </div> 
         <div id="profilePlot"> 
         </div> 

         <div id="buttonMenu"> 
         </div> 
     </div> 
     <div name="diveData"> 
     </div>  
     <div id="mydiv"> 
     </div> 
    </body> 
</html>

來源

2014-03-13 GregH

請分享您的代碼 –

我一直在研究這個。也許我只是不理解CSS。 – GregH

我想我可以使用桌子，但不是那麼漂亮的「老派」。我的理解是，樣式是在頁面上佈局元素的更好方式。 – GregH

簡單的方法是將標籤轉化爲內聯塊，並給予他們相同的大小

像這樣的東西：

<label class="label" for="profileId"... 
<label class="label" for="profileName" ...

和CSS，例如：

.label { 
    display: inline-box; 
    width: 100px; 
}

所以如果你想在你的HTML風格：

<div id="topline"> 
    <label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId"> 
    <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea> 
</div> 
<div id="secondline"> 
    <label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName"> 
</div>

來源

2014-03-13 06:46:12 Tynamo

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <LINK href="dive.css" rel="stylesheet" type="text/css"> 

    </head> 
    <body> 
     <div id="main" > 
      <div id="header"> 
       <form name="header"> 
        <div id="topline"> 
         <label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId"> 
         <br /> 
         <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px; ">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea> 
        </div> 
        <div id="secondline"> 
         <label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName"> 
        </div> 
       </form> 
      </div> 
         <div id="profilePlot"> 
         </div> 

         <div id="buttonMenu"> 
         </div> 
     </div> 
     <div name="diveData"> 
     </div>  
     <div id="mydiv"> 
     </div> 
    </body> 
</html>

來源

2014-03-13 06:47:32 Ricky

這沒有奏效。它基本上把所有的輸入元素放在一列中，一列下一列。現在沒有任何輸入元素左對齊。 – GregH

包括bootstrap.css

<html> 
    <head> 
     <title></title> 
     <!--INCLUDE BOOTSTRAP.CSS---> 
     <!-- <LINK href="dive.css" rel="stylesheet" type="text/css"> --> 
<style> 
label { 
    display: inline!important; 
} 
</style> 
    </head> 
    <body> 
     <div id="main" > 
      <div id="header"> 
       <form name="header"> 
        <div id="topline" class="span8 control-group"> 
         <label for="profileId" class="control-label">Dive Profile Id </label> 
         <input type="text" name="profileId" id="profileId" class="controls"> 
         <label for="descriptionTxtArea" class="control-label">Description</label> 
         <textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea" class="controls"></textarea> 
        </div> 
        <div class="clearfix"></div> 
        <div id="secondline " class="control-group"> 
         <label for="profileName" class="control-label" >Dive Profile Name</label> 
         <input type="text" name="profileName" id="profileName" class="controls"> 
        </div> 
       </form> 
      </div> 
         <div id="profilePlot"> 
         </div> 

         <div id="buttonMenu"> 
         </div> 
     </div> 
     <div name="diveData"> 
     </div>  
     <div id="mydiv"> 
     </div> 
    </body> 
</html>

來源

2014-03-13 07:05:51

如何使用大錘擊碎堅果... – Tynamo

使用CSS對齊兩個文本輸入元素

回答

相關問題