Question

我正试图在我的应用中“搜索”一个搜索。它由一个文本框和一个用于选择“类型”的下拉列表（类似于“已发送项目”，“已删除项目”，“收件箱”在Outlook类型应用程序中）和一个“执行”按钮来执行搜索组成。

我准备了一个小提琴。请注意，颠倒下拉菜单和go按钮的顺序似乎在控件之间添加了空格（这不是我想要的）。这是我在html中做错的事情，还是我应该将这个记录为引导人员的问题？

<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>

Answer 1

将您的<ul>元素放在“搜索”按钮后面，空格不见了，下拉列表也不会受到影响。

我将进一步调查，并寻找一种方法让<ul>元素不占用这个空间。但我的建议应该在不影响任何事情的情况下解决问题。

修改

这完全不是<ul>问题。确切的错误是由这些按钮inline-block显示引起的，它来自Bootstrap。由于它们是inline-block，因此</button>和<ul>之间的任何空格都将被视为文本空格。你应该删除它们之间的所有空格并且它是固定的（我也必须在源代码中删除它们之间的换行符。）

Updated Fiddle

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

1 个答案: