0

我正在尝试创建看起来平衡的两层多列表单的方法。我最近的尝试涉及将每个标签/输入封装在一个中li并让它们浮动到位。尝试有些成功，但有一个我无法解决的维度问题。表单是 600px 宽，我将lis 设置为 280px，这将使两列大致在表单中居中。然而，效果是不平衡的；一切都太偏左了。就像表单右侧有大约 150 像素的巨大边距 - 只有没有。

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

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

这是链接：jsfiddle [http://jsfiddle.net/9344a/] 提前谢谢你。（我已经尝试清理它，但由于尝试了不同的组合，CSS/HTML 可能有点混乱。如果还有什么难以理解的，请告诉我。）

4

2 回答 2

0

你可以给

  fieldset.partOne 
  {
      text-align: center;
  }
于 2013-07-26T05:02:07.440 回答
0

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

首先，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为 100%（增加输入大小的错误尝试）显然会阻止浮动。保证金问题是由fieldset.partOne ol li { width:280px; padding:5px 0 }. 删除此宽度会消除假边距。不太确定为什么，但课程ol li在表单中的工作方式略有不同，所以请注意这一点。

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

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

解决的问题：

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

一个未解决的问题是 FF 顶部对齐 {select} 数据。关于这个问题有很多帖子，但我还没有找到一个好的解决方案（一个只针对 FF 并且不影响其他浏览器的解决方案）。这对我来说不是一个优先事项，但如果它适合你，很多建议是可用的。进行搜索。

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

请记住，这是由新手编写的，您肯定会找到许多改进它的方法。但它确实有效，可能是开始或至少完善您可能遇到的任何问题的好地方。我不认为我这样做违反了任何协议，但如果不是这样，请告诉我。

于 2013-07-27T22:04:08.630 回答