CSS:表单中的多栏部分

CSS:表单中的多栏部分,css,multiple-columns,Css,Multiple Columns,我是css新手。我将试着解释我想要实现的目标。我有5个街区。每个块都有一个标题,然后有几个用于数据输入的标签输入对。标签和输入应该很好地对齐。每个块的标题应位于该块上方的中心 现在的诀窍是,这5个块应该在包含其他用于数据输入的普通标签输入对的表单中彼此相隔出现。(此处标签输入已经对齐,这意味着在“表单级别”上有一些css: 这在某种程度上干扰了我正在尝试创建的块布局。我目前的主要问题是左边的填充或边距。我的“块”太向右倾斜150像素,我不知道如何覆盖。我当前的css: .cssform div.

我是css新手。我将试着解释我想要实现的目标。我有5个街区。每个块都有一个标题,然后有几个用于数据输入的标签输入对。标签和输入应该很好地对齐。每个块的标题应位于该块上方的中心

现在的诀窍是,这5个块应该在包含其他用于数据输入的普通标签输入对的表单中彼此相隔出现。(此处标签输入已经对齐,这意味着在“表单级别”上有一些css:

这在某种程度上干扰了我正在尝试创建的块布局。我目前的主要问题是左边的填充或边距。我的“块”太向右倾斜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 {

}
有了这个,我的第一个街区是右边150px,而不是坐在最左边

第二个问题是对齐每个块的标题

有什么想法吗

编辑:

这里介绍了使用中的一般元素:

<!-- 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... -->

一级成绩
标签1
标签2
二级成绩
问题在于:

.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*/
}
.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*/
}