与Accordion的表格字段布局问题

Question

我有一个表单，我使用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>标签来创建各个部分..而且我用它来布局字段。

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

这是我之后的最终结果：

由于

Answer 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 删除边框＆amp;内部标签的背景。

我还没有在你的元素上添加所有必要的重置样式。更好的方法可能是将类添加到外部标签，并修改手风琴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" />