2

私はcssを初めて使用します。何を達成したいのかを説明していきます。私は5つの「ブロック」を持っています。各ブロックにはヘッダーがあり、次にいくつかのラベル(データ入力用の入力ペア)があります。ラベルと入力は適切に配置する必要があります。各ブロックのヘッダーは、そのブロックの中央に配置する必要があります

ここでの秘訣は、これらの5つのブロックが、データ入力用の他の通常のラベル入力ペアを含むフォーム内に互いに並んで表示されることです。(ここでは、label-inputはすでに整列されています。つまり、「フォームレベル」でいくつかの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
}

これは、私が作成しようとしている上記のブロックレイアウトをどういうわけか混乱させています。私の主な問題は、現在、パディングまたはマージンが残っていることです。私の「ブロック」は150pxだけ右にありすぎて、オーバーライドする方法がわかりません。ここに私の現在の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ピクセルになります。

2番目の問題は、各ブロックのヘッダーを揃えることです。

何か案は?

編集:

ここで使用されている一般的な要素:

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

1 に答える 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*/
}
于 2012-12-10T09:38:15.950 に答える