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

【问题标题】：How to align input boxes in a column using Zurb foundation如何使用 Zurb 基础对齐列中的输入框
【发布时间】：2014-07-02 16:52:08
【问题描述】：

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

http://jsfiddle.net/Sbt75/432/

案例一：

<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>

【问题讨论】：

基金会在这里帮不了你，你需要在输入字段中应用display:inline-block;。
这不是基金会特定的。你能创造一个小提琴吗？
小提琴：jsfiddle.net/Sbt75/432
您是否正在为您的单选按钮寻找类似的东西？ jsfiddle.net/Sbt75/445
我已经可以告诉你，这可能是由于输入在每个标签后插入了中断。这意味着无论任何东西，Bootstrap、Zurb、普通 HTML，在输入后总会出现中断，这就是我们使用 display:inline-block; 的原因

标签： css zurb-foundation

【解决方案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/（记得把预览区域放大，否则列会堆积）

【讨论】：

是的，这是一种方法。但不想为布局创建太多 div。
@Vahi 我可以理解这一点，但是由于您在项目中有基础，这将是最好的方法。否则，您必须自己实现一些自定义 CSS。对于项目中的不同情况，这是可读且易于更改的。从长远来看，这种结构总是对我有帮助。但你必须做出决定。
老实说，这可能是最好的解决方案。如果不使用显示方法，您不能将 3 个输入放在一列中并期望它们位于同一行。 @NicoO 在提醒我们可以将输入进一步拆分为更多列方面做得很好，这可能会使网站更具响应性。
谢谢@BuddhistBeast，你是对的，有时很难克服多个输入相邻的要求。您上面提到的解决方案（使用内联块）无疑是一种方法。但我很高兴我不必重新做所有这些工作，这要归功于这么好的框架。