CSS：表單中的多列部分

我是新來的CSS。我將嘗試解釋我想實現的目標。我有5個「塊」。每個塊都有一個標題，然後有幾個標籤 - 輸入對用於數據輸入。標籤和輸入應該很好地對齊。每個塊的標題應該集中在該塊的上方CSS：表單中的多列部分

現在的技巧是這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像素向右而不是坐在最左邊的可能。

第二個問題是align headers爲每個塊。

任何想法？

編輯：

這裏所使用的一般要素：

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

來源

2012-12-10 beginner_

的問題是這樣的：

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

我必須承認，在開始的時候，我曾經將複製INET粘貼此學習css，但現在我發現它可以做得更簡單，解決我的問題：

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

來源

2012-12-10 09:38:15

CSS：表單中的多列部分

回答

相關問題