内联表单基础

时间:2018-04-03 13:04:27

标签: css zurb-foundation

我正在开展一个项目,我需要创建一个带有基础的内联表单。问题是标签高于输入,我希望标签与输入内联。以下是目前的代码:

<form>
    <div class="row">
        <div class="grid-x small-x">
            <div class="row">
                <div class="small-3 rows">
                  <label for="right-label" class="right inline">Login</label>           
                </div>
                <div class="small-3 columns">
                  <input type="text" id="right-label" placeholder="ex:toto">
                </div>
            </div>
         </div>
    </div>
    <div class="row">
        <div class="grid-x small-x">
            <div class="row">
                <div class="small-3 rows">
                    <label for="right-label" class="right inline">Password</label>
                </div>
                <div class="small-3 columns">
                    <input type="password" id="right-label" placeholder="password">
                </div>
            </div>
        </div>
    </div>
</form>

这里是小提琴的链接:jsfiddle

1 个答案:

答案 0 :(得分:0)

insert caseObj;

您的<div class="small-3 rows"> <label for="right-label" class="right inline">Login</label> </div> 课程应为div而不是columns

观看以下JSFiddle