0

以一种有趣的方式，提交按钮粘在输入框上。我无法理解原因。我可以通过给出 -(minus) margin 等来解决它。但是，我正在寻找永久的解决方案。我附上了 chrome 调试工具的截图。

在此处输入图像描述

我想将按钮对齐到选择框下方的左侧。

如果看图有困难...

http://i.stack.imgur.com/VhJVb.png

                        <input class="reservationdates"  type="text" name="date_from"/>
                        <label>Drop-off date</label>
                        <select name="to_time" class="reservationdates">
                            <option value="07:00 am">07:00 AM</option>
                            <option value="07:30 am">07:30 AM</option>
                            <option value="08:00 am">08:00 AM</option>
                            <option value="08:30 am">08:30 AM</option>
                            <option value="09:00 am">09:00  AM</option>
                            <option value="09:30 am">09:30 AM</option>
                            <option value="10:00 am">10:00 AM</option>
                            <option value="10:30 am">10:30 AM</option>
                            <option value="11:00 am">11:000 AM</option>
                            <option value="11:30 am">11:30 AM</option>
                            <option value="12:00 pm">12:00 PM</option>
                            <option value="12:30 pm">12:30 PM</option>
                            <option value="01:00 pm">01:00 PM</option>
                            <option value="01:30 pm">01:30 PM</option>
                            <option value="02:00 pm">02:00 PM</option>
                            <option value="02:30 pm">02:30 PM</option>
                            <option value="03:00 pm">03:00 PM</option>
                            <option value="03:30 pm">03:30 PM</option>
                            <option value="04:00 pm">04:00 PM</option>
                            <option value="04:30 pm">04:30 PM</option>
                            <option value="05:00 pm">05:00 PM</option>
                            <option value="05:30 pm">05:30 PM</option>
                            <option value="06:00 pm">06:00 PM</option>
                            <option value="06:30 pm">06:30 PM</option>
                        </select>


                        <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                            <input class="span2"  name="date_to" size="16" type="text" value="12-02-2012" readonly>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>


                        <input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/>

                    </form>
4

2 回答 2

0

.control-group您可以使用引导程序中的类将输入按钮中的输入字段分成两行 。该类在 div 的底部添加了一些边距，应该使您的按钮从输入字段中脱离：

演示：http: //jsfiddle.net/MYjzj/

HTML

<form class="form-horizontal">
    <div class="control-group">
        <input class="reservationdates"  type="text" name="date_from"/>
        <label>Drop-off date</label>
        <select name="to_time" class="reservationdates">
            <option value="07:00 am">07:00 AM</option>
            <option value="07:30 am">07:30 AM</option>
            <option value="08:00 am">08:00 AM</option>
            <option value="08:30 am">08:30 AM</option>
            <option value="09:00 am">09:00  AM</option>
            <option value="09:30 am">09:30 AM</option>
            <option value="10:00 am">10:00 AM</option>
            <option value="10:30 am">10:30 AM</option>
            <option value="11:00 am">11:000 AM</option>
            <option value="11:30 am">11:30 AM</option>
            <option value="12:00 pm">12:00 PM</option>
            <option value="12:30 pm">12:30 PM</option>
            <option value="01:00 pm">01:00 PM</option>
            <option value="01:30 pm">01:30 PM</option>
            <option value="02:00 pm">02:00 PM</option>
            <option value="02:30 pm">02:30 PM</option>
            <option value="03:00 pm">03:00 PM</option>
            <option value="03:30 pm">03:30 PM</option>
            <option value="04:00 pm">04:00 PM</option>
            <option value="04:30 pm">04:30 PM</option>
            <option value="05:00 pm">05:00 PM</option>
            <option value="05:30 pm">05:30 PM</option>
            <option value="06:00 pm">06:00 PM</option>
            <option value="06:30 pm">06:30 PM</option>
        </select>
        <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
            <input class="span2"  name="date_to" size="16" type="text" value="12-02-2012" readonly /><span class="add-on"><i class="icon-th"></i></span>
        </div>
    </div>
    <input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/>
</form>
于 2012-05-09T16:14:16.583 回答
0

据我所知，将输入框与提交按钮分开引导程序使用'form-action'类，它为按钮添加了填充和边距。所以我认为你给予保证金的决定在某种程度上是正确的。尝试将提交按钮放入 . 但我可能是错的。

于 2012-05-04T16:56:10.553 回答