Question

我是Zurb Foundation的新手，我正在尝试将输入元素（第二个div与class =“large-9 columns”）对齐内联。但是，尽管使用了class =“columns”，它们仍然被叠加在一起。我怎样才能让他们安排内联？

案例1：

<div class="row">
                            <div class="large-3 columns">
                                Prefix:

                            </div>
                            <div class="large-9 columns">
                                <label>
                                    <input type="radio" name="PrefixTab" value="Mr.">Mr.</label>
                                <label>
                                    <input type="radio" name="PrefixTab" value="Mrs.">
                                    Mrs.</label>
                                <label>
                                    <input type="radio" name="PrefixTab" value="Ms.">
                                    Ms.</label>
                            </div>
                        </div>

案例2：

  <div class="row">
                        <div class="large-3 columns">
                            <label for="BirthMonthTab" ">* Birth Date:</label>
                        </div>
                        <div class="large-9 columns">
                            <input type="text" id="BirthMonthTab" name="BirthMonthTab" maxlength="2" />/

                        <input type="text" id="BirthDayTab" name="BirthDayTab" maxlength="2" />/

                        <input type="text" id="BirthYearTab" name="BirthYearTab" maxlength="4" />
                            (mm/dd/yyyy)

                        </div>
                    </div>

Answer 1

对于案例1，您可以针对<select>字段更改单选按钮。但对于这两种情况，您也可以尝试以下方式：

<div class="row">
    <div class="large-3 columns">
        <label class="inline right" for="BirthMonthTab">* Birth Date:</label>
    </div>
    <div class="large-3 columns">
        <input type="text" id="BirthMonthTab" placeholder="dd" name="BirthMonthTab" maxlength="2" />
    </div>
    <div class="large-3 columns">
        <input type="text" id="BirthDayTab" placeholder="mm" name="BirthDayTab" maxlength="2" />
    </div>
    <div class="large-3 columns">
        <input type="text" id="BirthYearTab" placeholder="yyyy" name="BirthYearTab" maxlength="4" />
    </div>
</div>

以下是jsFiddle的演示：http://jsfiddle.net/Sbt75/433/（请记住将预览区域放大，否则列将堆叠）

如何使用Zurb基础对齐列中的输入框

1 个答案: