我是 CSS 新手。我将尝试解释我想要实现的目标。我有5个“ block ”。每个 block 都有一个 header ,然后是几个用于数据输入的标签-输入对。标签和输入应该很好地对齐。每个 block 的标题应位于该 block 上方的中心
现在的技巧是,这 5 个 block 应该在包含其他用于数据输入的正常标签输入对的表单中并排出现。 (这里标签输入已经对齐,这意味着“表单级别”上正在进行一些CSS:
.cssform {
padding-top: 2em;
padding-bottom: 2em;
}
.cssform div{
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
}
.cssform label{
color: #990033;
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding-bottom: 5px
}
这在某种程度上扰乱了我试图创建的上述 block 布局。我目前的主要问题是剩余的填充或边距。我的“ block ”向右移动了 150 像素,我不知道如何覆盖。这是我当前的 CSS:
.cssform div.scores{
max-width: 680px;
clear: none;
float: left;
margin: 0;
padding: 5px 20px 8px 0;
padding-left: 0px
}
.cssform div.scores label{
float: left;
margin-left: 0px; /*width of left column*/
width: 100px;
}
.cssform div.scores input[type="text"]{
width: 20px;
padding-bottom: 5px
}
.scores h3 {
}
这样我的第一个 block 就在右边 150px,而不是坐在最左边。
第二个问题是对齐每个 block 的标题。
有什么想法吗?
编辑:
这里使用的一般元素:
<!-- Block 1 -->
<div class="scores">
<h3 class="scoreClass1">Score Class 1</h3>
<div>
<label class="scoreClass1">Label 1</label>
<input name="value1" type="text" class="scoreClass1"/>
</div>
<div>
<label class="scoreClass1">Label 2</label>
<input name="value2" type="text" class="scoreClass1"/>
</div>
<!-- More Values -->
</div>
<!-- Block 2 -->
<div class="scores">
<h3 class="scoreClass2">Score Class 2</h3>
<!-- Block 2 Values... -->
最佳答案
问题是这样的:
.cssform label{
color: #990033;
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.cssform div{
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
}
我必须承认,在开始学习 css 时,我曾经从 inet 复制粘贴过此内容,但现在我发现它可以在解决我的问题时更简单地完成:
.cssform div{
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 20px 8px 0;
}
.cssform label{
color: #990033;
font-weight: bold;
float: left;
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
关于CSS:表单中的多列部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13796142/