Css 如何使用ZURB基金将列中的输入框对齐 我是Zurb基金会的新手，我尝试将输入元素（第二div与类=“大9列”）对齐在一起。 但是，尽管使用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>

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

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


*出生日期：

这是一个JSFIDLE的演示：（记住要把预览区域放大，否则列会堆积起来）
Foundation在这里帮不了你，你需要应用
display:inline block输入字段。这不是特定于基础的。你能做个提琴吗？提琴：你是在为你的单选按钮找这样的东西吗？我已经可以告诉你们，这可能是由于输入在每个标签后面加了中断。这意味着无论什么，Bootstrap、Zurb、普通HTML，在输入后都会有中断，这就是为什么我们使用display:inline块；是的，这是一种方法。但是我不想为布局带来太多的DIV。@ VAI我能理解，但是既然你在项目中有了基础，这将是最好的选择。否则，您必须为自己实现一些自定义CSS。这是可读的，并且很容易根据项目中的不同情况进行更改。从长远来看，这种结构对我总是有帮助的。但你必须做出决定。老实说，这可能是最好的解决方案。如果不使用显示方法，则不能将3个输入放在一列中，并期望它们位于同一行@尼科在提醒我们可以将输入进一步分成更多的栏目方面做得很好，这可能会使网站更具响应性。谢谢你@BuddhistBeast你是对的，多个输入相邻的要求有时很难克服。您上面提到的解决方案（使用内联块）显然是一种方法。但我很高兴，因为有了这么好的框架，我不必再做这些工作了。