Question

我正在使用Twitter Bootstrap创建一个表单，并且在调整“help-inline”元素时遇到了一个小问题。

以下是代码：

<form class="form-horizontal" action="purchase.php" method="post" >
    <fieldset>

    <div class="control-group">
        <label class="control-label" for="date">Details</label>
        <div class="controls controls-row">

            <input class="span2" type="text" id="date" data-date-format="dd/mm/yyyy" title="Enter Date in DD/MM/YYYY Format Only" placeholder="DD/MM/YYYY" value="<?php echo $dateToday;?>" required>

            <input class="span2" type="text" name="resin" id="resin" title="Resin Name" placeholder="Resin Name" required/>

            <input class="span2" type="text" name="kg" id="kg" title="Enter Quantity in 00.0 format only" placeholder="Enter Quantity" pattern="\d+(\.\d{1})?" required/>

            <!-- Below is the problem in question-->
            <span class="help-inline">Error Text Here.</span>

        </div>
    </div>

    </fieldset>
</form>

“错误文字在这里”的屏幕截图显示未对齐：https://dl.dropbox.com/u/128104/Random/mia.png

任何想法如何解决这个问题？

Answer 1

我认为最快的解决方法是在相关范围上设置line-height CSS属性。如果你增加它，它应该向下移动一点并更好地对齐文本框的中心。

如果您要将所有这些放在fiddle中，StackOverflow的用户可以更轻松地为您提供更好的解决方案，因为他们可以更改代码并查看行为。

P.S。日期input字段缺少结束/。

Twitter Bootstrap水平表格内联帮助文本问题

1 个答案: