CSS：表单中的多列部分答案

【问题标题】：CSS: mulit-column part in a formCSS：表单中的多列部分
【发布时间】：2012-12-10 06:38:00
【问题描述】：

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

现在的诀窍是这 5 个块应该在一个包含其他用于数据输入的正常标签输入对的表单中并排出现。（这里的标签输入已经对齐，这意味着“表单级别”上有一些 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
}

这与我正在尝试创建的上述块布局有些混乱。我目前的主要问题是剩余的填充或边距。我的“块”太靠右了 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 {

}

有了这个，我的第一个块在右边 150 像素处，而不是坐在最左边。

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

有什么想法吗？

编辑：

这里使用的一般元素：

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

【问题讨论】：

标签： css multiple-columns

【解决方案1】：

问题是这样的：

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

【讨论】：