手风琴版面设计问题

Question

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

我现在正试图将相同的布局应用到CSS手风琴布局中的一个表单上，结果却变得一团糟。这个小提琴显示了出了什么问题。

这是我使用的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;
}

演示

更新演示从内部标签中删除边框和背景。

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

在这种情况下，最佳实践方法是在自己的CSS文件中加载这样的第三方产品，并在它们各自的文件中加载任何其他的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" />