- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个表单,我正在使用 CSS 在屏幕上布置字段。这是我想要的,可以在这里看到:<强> FIDDLE
我现在正尝试将相同的布局应用于 CSS Accordion 布局中的表单,但它变得一团糟。这个 FIDDLE 显示出了什么问题。
这是我正在使用的 HTML:
<div class='block'><label> Text 1</label><input type="text" name="text1" /></div>
<div class='block'><label> 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; }
我假设这是一团糟,因为 Accordion 正在使用 <lable>
标记来创建部分..我正在使用它来布置字段。
那么我该如何整齐地布置我的表单字段并让 Accordion 正常工作呢?
这是我想要的最终结果:
谢谢
最佳答案
Accordion 的 CSS 覆盖了您的某些表单样式。两者都没有非常令人印象深刻的特异性。您可以通过将 CSS 移动到末尾并添加祖先选择器来提高排名来解决此特定问题:
.horizontal div.block {
overflow:hidden;
}
.horizontal div.block label {
width:325px;
display:block;
float:left;
text-align:left;
vertical-align:middle;
}
Updated demo 从内部标签中删除边框和背景。
我还没有在您的元素上添加所有必要的重置样式。更好的方法可能是向外部标签添加类,并修改 Accordion 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" />
关于html - Accordion 的表单字段布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29168158/
我尝试通过正则表达式将文本中的单引号更改为双引号。 (单字)示例:我走了。 You gona fly to planet 'Ziqtos' => 我需要在 I'm 中保留单引号,并在 You gona
我正在构建一个 API,其中大部分将包含 JSON 和 HTML 内容。但是一些非常具体的端点只呈现 true 或 false,并且还在 POST 中接受 true 或 false。这是请求或响应的整
我是一名优秀的程序员,十分优秀!