Question

我试图将文本框和图标放在同一行，彼此相邻，就像bootstrap输入组一样，但由于某些原因我无法实现它。该图标是可点击的。

<div class="input-group">
<asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" maxlength="20"></asp:textbox>
<span class="middle-span">
    <asp:linkbutton id="btn_Category" runat="server"><i class="fa fa-folder-open" aria-hidden="true"></i></asp:linkbutton>
    <asp:linkbutton id="imgClearCal" runat="server" tooltip="Clear Category" style="vertical-align: middle; cursor: pointer;"><i class="fa fa-times" aria-hidden="true"></i></asp:linkbutton>
</span>    
</div>

请帮忙！

Answer 1

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2>Custom search field</h2>
            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg" placeholder="Buscar" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<强> CSS

#custom-search-input{
    padding: 3px;
    border: solid 1px #E4E4E4;
    border-radius: 6px;
    background-color: #fff;
}

#custom-search-input input{
    border: 0;
    box-shadow: none;
}

#custom-search-input button{
    margin: 2px 0 0 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: #666666;
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
}

#custom-search-input button:hover{
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search{
    font-size: 23px;
}

演示：https://jsfiddle.net/wvsxq45e/32/

使用输入组可点击图标

1 个答案: