如何将名称放在文本字段上方（前4个文本字段），其余名称正确对齐？ [英] How do I put the names above the textfield( first 4 textfield) and the rest align properly?

问题描述

< form class =myFormaction =sales.phpmethod =post>

< label>日期< input name =datesstabindex =1required> < / label>

< label>控制号< input type =textid =controlname =controltabindex =2required> < / label>

< label>收款人< input type =textid =payeename =payeetabindex =3required> < / label>

< label>小册子< input type =textname =booklettabindex =4required> < / label>

<form class="myForm" action="sales.php" method="post">

<label> Date <input name="datess" tabindex="1" required> </label>
<label> Control Number <input type="text" id="control" name="control" tabindex="2" required> </label>
<label> Payee <input type="text" id="payee" name="payee" tabindex="3" required> </label>
<label> Booklet <input type="text" name="booklet" tabindex="4" required> </label>

< label>< input type =checkbox>标签< / label>< input type =textname =tabq> < label>< input type =checkbox>矿泉水< / label>< input type =textname =tabq>


< label>< input type =checkbox>行李< / label>< input type =textname =tabq> < label>< input type =checkbox>执行统一< / label>< input type =textname =tabq>


< label>< input type =checkbox>简短< / label>< input type =textname =tabq> < label>< input type =checkbox>运动制服< / label>< input type =textname =tabq>


< label>< input type =checkbox> Thisrt< / label>< input type =textname =tabq> < label>< input type =checkbox>行李< / label>< input type =textname =tabq>


< label>< input type =checkbox>床上用品< / label>< input type =textname =tabq> < label>< input type =checkbox>行李< / label>< input type =textname =tabq>


< label>< input type =checkbox>洗衣< / label>< input type =textname =tabq> < label>< input type =checkbox>行李< / label>< input type =textname =tabq>


< label>< input type =checkbox> Black Shoes< / label>< input type =textname =tabq> < label>< input type =checkbox>行李< / label>< input type =textname =tabq>


< label>< input type =checkbox> Cannvas Shoes< / label>< input type =textname =tabq> < label>< input type =checkbox>包< / label>< input type =textname =tabq>






< br>

<label><input type = "checkbox"> Tab</label><input type="text" name="tabq"> <label><input type = "checkbox"> Mineral Water</label><input type="text" name="tabq">

<label><input type = "checkbox"> Bags</label><input type="text" name="tabq"> <label><input type = "checkbox"> Executive Uniform</label><input type="text" name="tabq">

<label><input type = "checkbox"> Short</label><input type="text" name="tabq"> <label><input type = "checkbox"> Athletic Uniform</label><input type="text" name="tabq">

<label><input type = "checkbox"> Thisrt</label><input type="text" name="tabq"> <label><input type = "checkbox"> Bags</label><input type="text" name="tabq">

<label><input type = "checkbox"> Bedding</label><input type="text" name="tabq"> <label><input type = "checkbox"> Bags</label><input type="text" name="tabq">

<label><input type = "checkbox"> Laundry</label><input type="text" name="tabq"> <label><input type = "checkbox"> Bags</label><input type="text" name="tabq">

<label><input type = "checkbox"> Black Shoes</label><input type="text" name="tabq"> <label><input type = "checkbox"> Bags</label><input type="text" name="tabq">

<label><input type = "checkbox"> Cannvas Shoes</label><input type="text" name="tabq"> <label><input type = "checkbox"> Bags</label><input type="text" name="tabq">

< label>总< input type =textname =booklettabindex =4required> < /标签>

< button type =btnCancelname =cancel>取消< / button>

< button type =btnSubmitname =submit> ;提交< / button>

< / form>

<label> Total <input type="text" name="booklet" tabindex="4" required> </label>
<button type="btnCancel" name="cancel ">Cancel</button>
<button type="btnSubmit" name="submit">Submit</button>

</form>

推荐答案

请参阅我对该问题的评论。



有很多方法可以做这些事情，但不幸的是，这个问题还远未明朗。忽略其余的神秘正确对齐，我建议从最简单的方法开始。将每个标签输入对与一个单独的div放在一起，并给出这个div CSS属性 display：inline-block; ，如果需要，还可以定义内部HTML的对齐方式div的。然后在标签后面加上< br /> 。问题解决了。



使用 display 属性的值可以实现更复杂但可能更强大，更灵活的解决方案table-row和table-cell（如果你想要更多具有对齐列的行，也可以是外部table），来实现类似于表的布局。也许它可以帮助你正确对齐，我只是不知道。



依旧......

-SA

Please see my comment to the question.

There are many ways to do such things, but, unfortunately, the question is far from clear. Ignoring the mysterious "proper alignment" of "the rest", I would suggest to start with perhaps one of the simplest approaches. Put each label-input pair with a separate div, and give this div CSS property display: inline-block;, if you want, also define alignment of the inner HTML in those divs. Then just put <br/> after the labels. Problem solved.

More complicated but perhaps more robust and flexible solution could be achieved with the values of display property "table-row" and "table-cell" (if you want more rows with aligned columns, also outer "table"), to implement table-like layout. Perhaps it could help you with your "the rest align properly", I just don't know.

And so on…

—SA

这篇关于如何将名称放在文本字段上方（前4个文本字段），其余名称正确对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！