Accordion 的表单域布局问题答案

【问题标题】：Form Field Layout issue with AccordionAccordion 的表单域布局问题
【发布时间】：2015-03-20 13:52:45
【问题描述】：

我有一个表单，我正在使用 CSS 来布局屏幕上的字段。这是我想要的工作，可以在这里看到： FIDDLE

我现在正在尝试将相同的布局应用于 CSS Accordion 布局中的表单，但它变得一团糟。这个 FIDDLE 显示出了什么问题。

这是我正在使用的 HTML：

<div class='block'><label>&nbsp;Text 1</label><input type="text" name="text1" /></div>

<div class='block'><label>&nbsp;Text 2</label><input type="text" name="text2" /></div>

和 CSS：

div.block {overflow:hidden; }
div.block label {width:325px; display:block; float:left; text-align:left; vertical-align:middle; }

我假设这是搞砸了，因为手风琴正在使用 <lable> 标记来创建部分。我正在使用它来布局字段。

那么我如何整齐地布局我的表单域并保持手风琴工作？

这是我想要的最终结果：

谢谢

【问题讨论】：

第二个演示中有很多代码，您可以将所需的输出附加为图像吗？
图片显示添加的最终布局。

标签： html css forms layout

【解决方案1】：

您的某些表单样式被手风琴的 CSS 覆盖。两者都没有非常令人印象深刻的特异性。您可以通过将 CSS 移至末尾并添加祖先选择器来提高排名来解决此特定问题：

.horizontal div.block {
    overflow:hidden;
}
.horizontal div.block label {
    width:325px;
    display:block;
    float:left;
    text-align:left;
    vertical-align:middle;
}

Demo

Updated demo 移除内部标签的边框和背景。

我没有在您的元素上添加所有必要的重置样式。更好的方法可能是将类添加到外部标签，并修改手风琴 CSS 以定位该类，或使用子选择器 (.horizontal > ul > li > label)。这样可以避免您需要重置这么多属性。

此类情况的最佳实践方法是将此类第三方产品加载到其自己的 CSS 文件中，并在其各自的文件中加载任何其他产品，然后加载包含任何覆盖的自定义 CSS 文件。这使得你的风格更容易胜过其他风格，这通常是你想要的。

<link rel="stylesheet" href="accordion.css" />
<link rel="stylesheet" href="menu.css" />
<link rel="stylesheet" href="widget.css" />
<link rel="stylesheet" href="custom.css" />

【讨论】：

图片添加到原始帖子以显示我正在尝试做的事情。
谢谢 - 更新后的布局看起来不像我发布的图像。我得到一个很大的输入字段，当您将鼠标悬停在它上面时会改变颜色。 ?
查看我的更新答案。我没有时间为你解决所有细节。不过，这提供了必要的方向。
@Rocket isherwood 指出了正确的方向，我认为您可以完成其余的工作，但如果您仍然遇到问题，请告诉我们。
感谢您的帮助。