0

我在 freemarker 的帮助下在运行时生成 HTML 页面。这对 HTML 生成部分造成了一些限制。
目前要在两个网格列中显示输入字段，我需要定义每一行并将我的字段放在其中。
当前的 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>

我可以span6在不连续放置 div 的情况下获得相同的结果吗？我想要类似的结果：

<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

您可以使用 :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 回答
0

如果你想这样做而不将 span6 放在行内，那么你首先需要摆脱你在主容器 div 中使用的行流体。只需在此处使用行并应用偏移量即可将所需的 div 向右移动。就像这支笔http://www.codepen.io/anon/pen/wfFnG

名字： 中间名首字母： 姓氏： 社会安全号码：
于 2013-07-18T17:20:05.607 回答