Question

我在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;

}

Answer 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;
}

或者？

Answer 2

您可以使用：nth-child，但仅在最近的浏览器中支持

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

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

如果您需要支持较旧的浏览器，您可以更改字段的顺序并将它们彼此相邻地浮动。

Answer 3

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

名字：中间初始：姓：社会安全号码：

两列网格不使用行类

3 个答案: