HTML表格對齊正確

你好，我嘗試將我的所有輸入對齊到一個正常形式！我不能使它適合在一起！GRR感謝您的幫助，請...這是在2小時IM失去了我的時間在這簡單的事情.....HTML表格對齊正確

  <form name="input" action="html_form_action.asp" method="get"> 

       <div id="one"> 
       <p><label>Prénom</label> <input type="text" id="Prénom"/></p> 
       <p><label>Nom</label> <input type="text" id="Nom" /></p> 
       <p><label>Mot de passe</label> <input type="text" id="Pass" /></p> 
       <p><label>E-mail</label> <input type="text" id="Mail" /></p> 
       </div> 

       <input type="submit" value="Submit" /> 
     </form>

來源

2011-12-07 FrankSharp

請定義「正常」。這是告訴我們什麼是錯誤的，以及你希望表單看起來如何！對於法國人來說，「正常」通常是不同的。 –

每個人都用「正常」的形式理解我的意思，同義詞是統一的形式....感謝您鼓勵我的自我說英語... – FrankSharp

你想在一條線上的一切。一個垂直的文本框列表。每個角落裏有一個？ –

如果你只是想使它排隊不使用表，你可以只用一些簡單的CSS：

label { 
    width: 120px; //however wide your longest label is 
    float: left; 
}

然後就取出p標籤，並把換行每個輸入後。

來源

2011-12-07 01:54:22 Michaeldcooney

我（不出意外）更喜歡我的方法。 'float'將事情從正常流程中拉出來，並且通常需要將'clear = both'作爲最後一個浮動元素之後的重置，導致標記僅用於幫助佈局。 –

你可以給你的標籤寬度，並將它們向右對齊。要做到這一點，你必須讓他們內聯塊元素。

見this fiddle

我猜你不有對準他們的權利。這只是當人們用桌子來做這件事時我看到的一種風格。

來源

2011-12-07 01:56:16

不知道你想達到什麼目的。

但是，如果您想要將輸入的值對齊到文本框中。在輸入代碼，添加：

style="text-align: right"

如果要對齊所有文本框的右側，我建議你可以重新格式化您的形式在表中。

來源

2011-12-07 01:57:48 Raptor

我想你的意思是表格的外觀，兩列，一個是標籤，另一個是輸入字段，第二列左對齊，第一列左或右（或許更易讀）。最明顯和最可靠的方法是讓一個表：

<table id="one"> 
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/> 
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" /> 
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" /> 
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" /> 
</table>

然後樣式所需的CSS，例如與td：第一個孩子：文本對齊：正確。

這會導致第一列的寬度與最長標籤所需的寬度相同。其他方法需要對寬度進行猜測，並且這種方法不夠健壯，因爲所需的寬度取決於字體。

對於任何後來指責你「使用表格進行佈局」的人來說，你可以回答這是一種實際工作的方法，並且沒有理由認爲這樣的表格不能被視爲表格數據。

來源

2011-12-07 12:23:18

HTML表格對齊正確

回答

相關問題