gpt4 book ai didi

html - 在 twitter bootstrap 中反转输入组内按钮和下拉菜单的顺序会产生格式错误的结果

转载 作者:太空宇宙 更新时间:2023-11-04 13:55:14 26 4
gpt4 key购买 nike

我试图在我的应用程序中“美化”搜索。它由一个文本框、一个用于选择“类型”的下拉列表(类似于 outlook 类型应用程序中的“已发送邮件”、“已删除邮件”、“收件箱”)以及一个用于执行搜索的“开始”按钮组成。

我在下面准备了一个 fiddle 。请注意,反转下拉菜单和转到按钮的顺序似乎在控件之间增加了空间(这不是我想要的)。这是我在我的 html 中做错了什么,还是我应该将其记录为 Bootstrap 人员的问题?

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>被视为文本空格。您应该删除它们之间的所有空格并且它是固定的(我也必须在源代码中删除它们之间的换行符)。

Updated Fiddle

关于html - 在 twitter bootstrap 中反转输入组内按钮和下拉菜单的顺序会产生格式错误的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21940530/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com