使html表單中的所有文本框都在同一點結束

我試圖使窗體看起來像下面的屏幕截圖一樣。文本框應該在文本之後立即開始，並且所有文本框都應該在同一點結束。使html表單中的所有文本框都在同一點結束

我現有的標記低於：

.txtbig { 
 
    width: 100%; 
 
}

<table style="border: 1px solid black; border-image: none; width: 100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="tableBody1" colspan="4"> 
 
     <strong>Intended Recipient Information</strong> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Name and Title 
 
     </td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td style="width: 11px;"> 
 
     <span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Company Name and Division</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Complete Mailing Address</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Direct Telephone No.</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Email Address</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Intended Application</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

欣賞在同你的建議。

來源

2016-03-03 Dotnet coder

不可能做到你這樣做是在一個表的方式。表格列將自動調整到與最寬標籤相同的寬度。嘗試將它們放在一個表格元素中，並使用標記代替文本 –

您不應該將表格用於佈局，僅用於表格數據！ –

table，tr，tr顯示可以被重置和flex用於第一次接近/測試。標籤和fieldset在這裏確實做得很好 –

考慮使用bootstrap來做這個佈局！

看到此鏈接：

http://getbootstrap.com/css/#forms-horizontal

來源

2016-03-03 18:29:56

我同意你的解決方案，但我必須重新設計整個html頁面以使用bootstrap設計佈局。它也爲我消耗了很多時間。因此，尋找包含我現有方法（即使用表格）的解決方案。 –

那麼請使用以下的css：

table tr td:first-child{ 
    width:20%; //editable as per your design requirement 
}

這將設置一個固定寬度表和其他TD的所有第一款TD會在相同的寬度這意味着你的textarea將以相同的寬度出現

來源

2016-03-03 18:31:14

你可以使用Display:flex並重寫HTML 或重置表元素的顯示值（請參閱本秒片段）：

div { 
 
    border: solid; 
 
} 
 
p { 
 
    display: flex; 
 
    padding: 0.25em 0; 
 
    margin: 0; 
 
} 
 
input { 
 
    flex: 1; 
 
    margin: 0 0.5em; 
 
} 
 
/* fun */ 
 

 
p:nth-child(even) { 
 
    background: lightgray; 
 
}

<div> 
 
    <h1> 
 
     <strong>Intended Recipient Information</strong> 
 
</h1> 
 
    <p> 
 
    Name and Title 
 
    <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255"><span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
    <p> 
 
    Company Name and Division 
 
    <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255"> 
 
    <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
    <p> 
 
    Complete Mailing Address 
 
    <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255"> 
 
    <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
    <p> 
 
    Direct Telephone No. 
 
    <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255"> 
 
    <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
    <p> 
 
    Email Address 
 
    <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255"> 
 
    <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
    <p> 
 
    Intended Application 
 
    <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255"> 
 
    <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 
    </p> 
 
</div>

tr, 
 
[colspan="2"] { 
 
    display:flex; 
 
    } 
 
td { 
 
    display:inline-block; 
 
    padding: 0.25em 0; 
 
    } 
 

 
[colspan],input { 
 
    flex:1; 
 
    margin:0 0.125em 
 
    } 
 
/* fun */ 
 
tr:nth-child(even) { 
 
    background:lightgray; 
 
    }

<table style="border: 1px solid black; border-image: none; width: 100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="tableBody1" colspan="4"> 
 
     <strong>Intended Recipient Information</strong> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Name and Title 
 
     </td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td > 
 
     <span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Company Name and Division</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Complete Mailing Address</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Direct Telephone No.</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Email Address</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Intended Application</td> 
 
     <td colspan="2"> 
 
     <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255"> 
 

 
     </td> 
 
     <td> 
 
     <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-03-03 18:33:47

我也同意，使用引導可能是要走的路。這是一個通用的例子。

http://codepen.io/anon/pen/EKjzoV

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
    </div> 
    </div> 
</form>

來源

2016-03-03 18:36:18

圖標丟失;） –

使html表單中的所有文本框都在同一點結束

回答

相關問題