手风琴的表单字段布局问题

Question

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

我现在正尝试将相同的布局应用于 CSS 手风琴布局中的表单，但它变得一团糟。 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 从内部标签中删除边框和背景。

我没有在您的元素上添加所有必要的重置样式。更好的方法可能是将 classes 添加到外部标签，并修改手风琴 CSS 以定位 class，或使用子选择器 (.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" />

手风琴的表单字段布局问题

Form Field Layout issue with Accordion

html

css

forms

layout