我正在尝试在我的应用程序中"漂亮"搜索a。 它由一个文本框和一个用于选择"类型"(类似于 Outlook 类型应用程序中的"已发送邮件"、"已删除邮件"、"收件箱")的下拉列表组成,以及用于执行搜索的"go"按钮。
我在下面准备了一个小提琴。 请注意,反转下拉菜单和 go 按钮的顺序似乎在控件之间增加了空间(这不是我想要的)。 这是我在 html 中做错的事情,还是我应该将此记录为引导人员的问题?
http://jsfiddle.net/ebV3v/
<form class="clearfix" role="form" style="padding:5px; border:solid 1px red;">
<div class="input-group">
<input id="searchText" type="text" placeholder="" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:120px;">
<span>[ -- Select -- ]</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><button>X</button></li>
<li><button>Y</button></li>
<li><button>Z</button></li>
</ul>
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
<form class="clearfix" role="form" style="margin-top:5px; padding:5px; border:solid 1px green;">
<div class="input-group">
<input id="searchText" type="text" placeholder="" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:120px;">
<span>[ -- Select -- ]</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><button>X</button></li>
<li><button>Y</button></li>
<li><button>Z</button></li>
</ul>
</div>
</div>
</form>
将<ul>
元素放在"搜索"按钮之后,空格消失,下拉列表不会受到影响。
我将进一步调查并寻找一种方法来将<ul>
元素留在那里而不占用此空间。但我的建议应该在不影响任何事情的情况下解决问题。
编辑
这完全不是一个<ul>
问题。确切的错误是由这些按钮引起的,这些按钮inline-block
显示,它来自 Bootstrap。由于它们inline-block
,</button>
和<ul>
之间的任何空格都被视为文本空格。您应该删除它们之间的所有空格,并且它是固定的(我也必须在源代码中删除它们之间的换行符)。
更新的小提琴