多列形式不均匀显示

Question

我正在尝试创建一种看起来平衡的双层多列形式的方法。我最近的尝试涉及将每个标签/输入包含在li中并让它们浮动到位。这种尝试有些成功，但是有一个我无法解决的维度问题。 表格宽度为600px，我制作li s 280px，这将使两列大致居中于表格中。然而，效果是不平衡的;一切都在左边太多了。这就像表格右侧有大约150px的差距 - 只有没有。

在分析它时，我注意到input实际测量的是175px。但是，如果我尝试增加宽度，它会转到一个新行，所以它们的行为就像是280px。但是你会注意到在jsfiddle中，最后li延伸到全宽 - 600px。因此，它不能是任何fieldset格式的结果。此外，如果我将float更改为“正确”，则150px的假边距仍然存在。 Firebug正常检测所有边距和填充。

我只是不明白。 我已经尝试过重命名，应用其他类，更改li的顺序，删除属性和添加其他属性，以及更改样式协议......但通常我只会让事情变得更糟。如果我的其他任何技术接近提供我正在寻找的显示器，我会完全放弃ol li概念。 造成150px右边距的原因是什么？我怎么摆脱它呢？ 我需要理解这一点，因为表单的第二部分应该有两列和三列。因此，如果li s无法提供一致的宽度，我必须尝试其他方法。

以下是链接：jsfiddle [http://jsfiddle.net/9344a/] 先感谢您。 （我试图清理它，但是由于尝试了不同的组合，CSS / HTML可能会有点混乱。如果有任何事情仍然难以理解，请告诉我。）

Answer 1

你可以提供

  fieldset.partOne 
  {
      text-align: center;
  }

Answer 2

问题实际上是错误的复合。​​

  

首先，当input大小应该直接定位时，li大小被错误地定位到Example: fieldset.partOne ol li { width:280px; padding:5px 0 } WRONG! fieldset.partOne ol li input { width:280px; padding:5px 0 } or simply fieldset.partOne input { width:280px; padding:5px 0 }。      ol li

     

此外，将fieldset.partOne ol li { width:280px; padding:5px 0 }的宽度设置为100％（错误的尝试增加输入的大小）显然会阻止浮动。   保证金问题是由ol li引起的。删除此宽度可消除假边距。不太确定为什么，但是课程{{1}}在表格中的作用略有不同，所以要注意这一点。

     

我对这个表单的概念相当奇怪，我在尝试获得最终结果时，我的HTML和CSS都犯了几个错误。所以我回到了开头并从头开始重建，并且能够创建一个符合我奇怪标准的非标准多列表单，仅使用CSS，并且适用于大多数浏览器。

     

Stackoverflow帖子在解决我遇到的所有小怪癖方面都是非常宝贵的，所以我想我会回报这个问题并提供一个可以帮助其他新手识别他们想要什么以及可能如何到达那里的jsfiddle。   我会发现这样的东西非常有帮助。

解决的问题：

• 使用各种大小的输入元素对齐两个和三个列形式。
• {ol li}或{div}？ {li}不是非标准格式的好解决方案。我必须将{li}用于一个部分，将{div}用于另一部分以使表单有效。
• {select}大小调整不一致。它通常必须大于您的{input}
• 防止较小的{输入}浮动到间隙中。
• 对齐奇形{input}和{label}字段。
• 字体大小和样式还原为浏览器默认值（重置不适用于HTML5？）

  

未解决的问题是FF顶部对齐{select}数据。关于这个问题有很多帖子，但我还没有找到一个好的解决方案（一个只针对FF并且不影响其他浏览器）。这不是我的优先考虑，但如果是给你的话，可以提供很多建议。做一个搜索。

     

以下是显示表单的链接，并显示代码：http://jsfiddle.net/LAVJn/1/

     

请记住，这是由新手写的，你肯定会找到很多方法来改进它。但它确实有效，可能是一个好的开始或至少可以提出任何问题的地方。   我不认为我违反任何协议这样做，但如果不是这样，请告诉我。