HTML表单布局问题[关闭]答案

【问题标题】：HTML form layout problems [closed]HTML表单布局问题[关闭]
【发布时间】：2013-01-20 21:56:11
【问题描述】：

我是 jQuery 和 PHP 的新手，所以我知道我的编码充其量是非常粗糙的，但我需要这方面的帮助。

我的 PHP 编码：

<td style="width: 39px; height: 30px;">

<select id="choice" name="choice" class="ddl" style="width: 150px">
<?php foreach($xml->children() as $pizza){ ?>
<option value="<?php echo $pizza; ?>" selected=""><?php echo $pizza; ?></option>
<?php }?>
</select></td>
        <td style="height: 30px; width: 32px;">
        <input id="num" name="num" class="dd2" style="width: 46px" 
        type="number"></td>
        <td style="height: 30px; width: 91px;">
        <input TYPE = "button" id="addbt" Name = "addbt" VALUE = "Add Pizza" class="auto-style1"></td>
        <td style="height: 30px">
        <input TYPE = "button" id="removebt" Name = "removebt" VALUE = "Remove A Pizza" class="auto-style1"></td>
    </tr>
    <tr>
        <td style="width: 131px; height: 30px;">&nbsp;</td>
        <td style="width: 39px; height: 30px;">

        &nbsp;</td>
        <td style="height: 30px; width: 32px;">
        &nbsp;</td>
        <td style="height: 30px" colspan="2">
        &nbsp;</td>
    </tr>
    <tr>
        <td style="width: 131px">


     <INPUT TYPE = "Submit" Name = "Submit1" VALUE = "Submit Order"></td>
        <td colspan="4"><input id="reset" type="button" value="Reset   Order"></td>
    </tr>
</table>
&nbsp;&nbsp;<p>&nbsp;</p> &nbsp;&nbsp;
</form>

jQuery 编码是：

<script type="text/javascript">

 $("#addbt").click(function () {
 $('#choice').clone()
     .attr('id', 'choice' + $('.ddl').length)
     .attr('name', 'choice' + $('.ddl').length)
     .insertAfter(".ddl:last");
 $('#num').clone()
     .attr('id', 'num' + $('.dd2').length)
     .attr('name', 'num' + $('.dd2').length)
     .insertAfter(".dd2:last");});

 $("#removebt").click(function () {
 $("#choice1").remove();
 $("#num1").remove();
 });    


 $('#reset').click(function() {
 location.reload();});
 </script>

如何影响克隆的布局？当我创建超过五个克隆时，它们的高度不再相等。

【问题讨论】：

你到底是什么意思？
克隆并放置在同一个“盒子”中，因为它们的下拉列表（dd1）和数字计数器（dd2）在 5 个克隆后不同，克隆不再正确对齐。
Ryan，你会添加一个屏幕截图，还是（更好）把它放到一个实时网站上（例如 JSFiddle）？这可能会让你的问题更清楚。
@halfer - 当然：jsfiddle.net/A6h24 我从未使用过 JSFiddle，但在这里
好多了！我认为问题在于，当您单击“添加披萨”时，菜单未与输入框对齐？最好将它们放在一个<div> 中，但您已将菜单放在一个<td> 中，而将输入框放在另一个中。

标签： jquery html css clone

【解决方案1】：

你的输入和选择元素有不同的边距，所以添加这个 CSS 规则可以解决它：

#table input, #table select {
    margin: 2px;
}

http://jsfiddle.net/A6h24/4/

【讨论】：

这确实给了元素更多的呼吸空间，但是两种类型的输入设备之间的高度差异仍然意味着随着更多订单行的添加，垂直对齐会越来越多地中断。也许静态高度可以解决这个问题？（我认为在同一个<td> 中放置多行无论如何都是一个核心问题，应该被放弃，但是...... :)。
哇...我应该有这个...谢谢:)
不客气！每当你遇到这样的错位时，你有 95% 的机会可以用 CSS 修复它。如果不是，那么您的 HTML 格式错误。 :) @halfer 是的，我们的想法是通过尽可能具体地定义它们的风格来使这些元素尽可能紧凑......理想情况下也可以脱离桌子设计。 :)

【解决方案2】：

将每个下拉列表/数字对括在 <TD> 标记中以保持配对。您的 HTML 正文设计得不好，这就是您产生此错误的原因。现在您有一个用于选择的<TD> 和一个用于输入的<TD>...所以您有两个独立的字符串 HTML 实体包含不同的类别...这会导致不匹配，因为它们都是独立的。

<td style="width: 39px; height: 30px;">         
    <select id="choice" name="choice" class="ddl" style="width: 150px"></select>
    <input id="num" name="num" class="dd2" style="width: 46px" type="number">
</td>

你还必须重写一点你的 JS 代码。

【讨论】：

我知道编码是原始的。我还在学习。这是一个使其“完全”发挥作用的项目。
对不起...错误的答案。
我明白了。我会尝试。谢谢:)

【解决方案3】：

您可以采取以下方法：

<td colspan="2">
    <div class="pizza-order-line">
        <select ... ></select>
        <input ... />
    </div>
</td>

在您的 CSS 中：

div.pizza-order-line select {
    margin-right: 4px;
}

div.pizza-order-line input {
    ....
}

这样，您可以合理地确定浏览器“知道”需要排列的内容。但是，如果您将多个项目放在表格单元格中，除非它们有保证的高度，否则它们将无法正确排列。

【讨论】：

感谢您的帮助。非常有用。
没有问题。正如我在 Shomz 的回答中提到的那样，选择和输入项目的静态高度（比如 2em 开始试验）可能有助于垂直对齐。