我有一個HTML格式如：對齊HTML輸入字段由：

<html> 
    Name:<input type="text"/></br> 
    Email Address:<input type="text"/></br> 
    Description of the input value:<input type="text"/></br> 
</html>

現在標籤都開始在同一列，但文本框在不同的位置按標籤的文本長度開始。

是否有一種方法來對齊輸入字段，使得所有「：」和文本框將從相同的位置開始，並且前面的文本將被右對齊直到「：」？

如果可以幫助實現這一點，我可以使用CSS。

來源

2012-06-03 Sankar P

在哪裏形成的？我看到表單控件，但沒有形式。 –

這只是一個僞代碼片段。假設你在html標籤中有一個表單。 –

Working JS Fiddle

HTML：

<div> 
     <label>Name:</label><input type="text"> 
     <label>Email Address:</label><input type = "text"> 
     <label>Description of the input value:</label><input type="text"> 
    </div>

CSS：

label{ 
    display: inline-block; 
    float: left; 
    clear: left; 
    width: 250px; 
    text-align: right; 
} 
input { 
    display: inline-block; 
    float: left; 
}

來源

2012-06-03 07:56:55 DaneSoul

對我不起作用... – Ben

有沒有辦法做到這一點，而不必指定絕對寬度？ – Ajedi32

Ajedi32，你可以使用相對寬度（％），看這裏：http://jsfiddle.net/T6zhj/293/。但是您需要以某種方式爲所有標籤設置相同的寬度，因爲您需要將它們對齊到正確的位置。 – DaneSoul

你可以使用一個標籤（見JsFiddle）

CSS

label { display: inline-block; width: 210px; text-align: right; }

HTML

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br /> 
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
</html>

或者你可以在一個表中使用這些標籤（JsFiddle）

<html> 
    <table> 
     <tbody> 
      <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr> 
      <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr> 
      <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr> 
     </tbody> 
    </table> 
</html>

來源

2012-06-03 07:38:34

另外，通過使用'label'，您將獲得各種不同的輔助功能：您可以點擊跳轉到相關的控件，屏幕閱讀器將能夠理解您的表單。用於佈局的「表格」不會讓你感到滿意。 –

@MattiasBuelens：但是一個表格會採用第一列到標籤的寬度。 F.E.對於一個多語言網站，您可以在其中動態獲取標籤標題，您可以將第一列中的td設置爲nowrap ...因此，不要刪除表格，他們有他們的使用 –

@wouterHuysentruit這是我正在尋找，但CSS示例中的字段之間沒有空格。這怎麼解決？ –

在表單元素上設置一個寬度（它應該存在於您的示例中！）並浮動（並清除）輸入元素。另外，刪除br元素。

來源

2012-06-03 07:43:39

在我的情況，我總是把這些東西在p標籤像

<p> name : < input type=text /> </p>

等，然後應用CSS一樣

p { 
    text-align:left; 
} 

p input { 
    float:right; 
}

您需要指定在p tag.because輸入標籤的寬度會浮沒事的方式。

這個CSS也會影響提交按鈕。您需要覆蓋此標記的規則。

來源

2012-06-03 08:13:11 maksbd19

我知道這個方法之前已經被採用過，但是我相信使用表格，佈局可以很容易地生成，雖然這個可能不是最佳實踐。

JSFiddle

HTML

<table> 

    <tr><td>Name:</td><td><input type="text"/></td></tr> 

    <tr><td>Age:</td><td><input type="text"/></td></tr> 

</table> 

<!--You can add the fields as you want-->

CSS

td{ 
    text-align:right; 
}

來源

2013-07-09 03:51:56 IcyFlame

絕對比指定寬度還要好 – velop

http://jsfiddle.net/T6zhj/1/

使用顯示錶單元格/行會做的工作，而不需要任何寬度。

在HTML：

<html> 
    <div> 
     <div class="row"><label>Name:</label><input type="text"></div> 
     <div class="row"><label>Email Address:</label><input type = "text"></div> 
     <div class="row"><label>Description of the input value:</label><input type="text"></div> 
    </div> 
</html>

的CSS：

label{ 
    display: table-cell; 
    text-align: right; 
} 
input { 
    display: table-cell; 
} 
div.row{ 
    display:table-row; 
}

來源

2014-10-23 08:51:33 vonwa

例如：http://jsfiddle.net/35sm3jsk/ – ishayle

我剛給定的寬度來標記和輸入類型被自動對準。

input[type="text"] { 
 
    width:100px; 
 
\t height:30px; 
 
\t border-radius:5px; 
 
\t background-color: lightblue; 
 
\t margin-left:2px; 
 
    position:relative; 
 
} 
 

 
label{ 
 
position:relative; 
 
width:300px; 
 
border:2px dotted black; 
 
margin:20px; 
 
padding:5px; 
 
font-family:AR CENA; 
 
font-size:20px; 
 

 
}

<label>First Name:</label><input type="text" name="fname"><br> 
 
<label>Last Name:</label><input type="text" name="lname"><br>

來源

2015-06-26 15:25:30 Parul

對齊HTML輸入字段由：

回答

HTML

CSS

相關問題