Question

我正在尝试在文本框后面显示一个图标，图像的左边缘与文本框的右边缘相邻。我不能让它发生。图像始终较低并向右偏移。我某些引导程序与此有关，但我尝试关闭开发工具中几乎所有的CSS，但它仍然不会在texbox之后显示。

这是代码，我甚至将它包裹在一个跨度中，希望强制它在一行中。 bootstrap类启动我想要的文本框，我只是想直接在文本框旁边的图标。

 <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
        <div class="col-md-10">
           <span class="imageinline">
               <asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control" Width="300" MaxLength="20" ClientIDMode="Static" /><asp:Image ID="ccImage" runat="server" ClientIDMode="Static" ImageUrl="~/Images/CC Icons/amex_small.png"/></span>
        </div>

    </div>

这是css

span.imageinline img {
    display: inline !important;
    margin-left: 2px;
}

Answer 1

为了使控件在bootstrap中水平显示，必须使用bootstrap中的form-inline类，而不使用自己的任何其他css，如下所示

<div class="form-group">
        <asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
        **<div class="form-inline">**
            <div class="col-md-10">
                <asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control"
                     Width="300" MaxLength="20" ClientIDMode="Static" TabIndex="8"/>
                <asp:Image ID="ccImage" runat="server" ClientIDMode="Static"
                     ImageUrl="~/Images/CC Icons/amex_small.png"/>
             </div>      
        </div>
    </div>

无法使图像显示为内联，并且在引导程序中没有边距

1 个答案: