0

freemarker を使用して、実行時に HTML ページを生成しています。これにより、HTML 生成部分にいくつかの制限が生じます。
現在、入力フィールドを 2 つのグリッド列に表示するには、各行を定義してフィールドを配置する必要があります。
現在の HTML

<body class="container">
    <div class="section-outline">
        <div class="row-fluid show-grid">
        <div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
        <div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text" /></div>
        </div>
        <div class="row-fluid show-grid">
        <div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text" required/></div>
        <div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>
        </div>

divを続けずに同じ結果を得ることができますspan6か? 次のようなものと同じ結果が必要です：

<div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text" /></div>
<div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>

ここ

.show-grid [class*="span"] {
    text-align: left;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 40px;
    line-height: 40px;
    margin-top: 10px;
    display: inline;
}
label.pocLabel {
    width: 200px;
    vertical-align: middle;
}
.section-outline {
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}
4

3 に答える 3

1

これはあなたが探しているものですか: http://jsfiddle.net/wa2YQ/

.span6.form-inline {
    display:inline-block;
    width:49%;
}
.span6.form-inline label {
    width:200px;
    display:inline-block;
}

または http://jsfiddle.net/wa2YQ/1/

.span6.form-inline {
    float:left;
    width:50%;
}
.span6.form-inline label {
    width:200px;
    display:inline-block;
}

それとも？

于 2013-07-18T17:20:54.827 に答える
0

行内に span6 を配置せずにそれを行いたい場合は、最初にメイン コンテナー div で使用している行流体を取り除く必要があります。そこで行を使用し、オフセットを適用して、必要な div を右に移動します。このペンのようにhttp://www.codepen.io/anon/pen/wfFnG

名: ミドルネーム イニシャル: 姓: 社会保障番号:
于 2013-07-18T17:20:05.607 に答える
0

:nth-child を使用できますが、これは最近のブラウザーでのみサポートされています

.show-grid .span:odd {
   /* Your css for left floating */
}

.show-grid .span:even {
   /* Your css for right floating */
}

古いブラウザーをサポートする必要がある場合は、フィールドの順序を変更して、横に並べて配置できます。

于 2013-07-18T17:14:52.133 に答える