Question

我正在尝试编写一个内联的表单，其中包含一个labe，一个文本输入和一个日历图标。但是，它不是内联的。在第一行中，标签在文本输入和日历图标的另一行中呈现然后在下面。知道我做错了吗？

这是html部分：

<form accept-charset="utf-8" method="post" action="/something" class="form-inline form" id="id29">
    <div class="form-group">
        <label class="control-label" for="id30">View Date</label>
    </div>
    <div class="form-group">
        <input id="id30" value="2014-10-01" name="31" type="text" class="text form-control input-sm">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</form>

Answer 1

你的div和spans的顺序有些不合时宜。在记忆之前，最简单的方法就是复制代码并用你的代码替换它们的部分：）

<form accept-charset="utf-8" method="post" action="/something" class="form-inline form" id="id29">
    <div class="form-group">
        <label class="control-label" for="id30">View Date</label>
    </div>
    <div class="form-group">
        <div class="input-group">
            <input id="id30" value="2014-10-01" name="31" type="text" class="text form-control input-sm">
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</form>

表格内联并非真正与标签，文字输入和日历内联

1 个答案: