Question

我正在尝试使图像显示在组合框的右侧，但是由于某种原因它在其下方下拉。任何帮助将不胜感激。

<telerik:RadComboBox ID="ddl" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID"  NoWrap="true" Width="40%" CausesValidation="false"> 
       </telerik:RadComboBox>

<span style="display:inline" class="requiredTimeKeeper"><asp:Image CssClass="inline" id="Image1" ImageUrl="../../images/requiredfield.gif" runat="server"></asp:Image>

Answer 1

您可以使用boostrap类：row，col-6和col-1将所有内容放在一行中，no-gutters将帮助您删除不必要的row填充

    <div class="row no-gutters">
      <telerik:RadComboBox ID="ddl" class="col-6" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID"  NoWrap="true" Width="40%" CausesValidation="false"> 
           </telerik:RadComboBox>

      <span style="display:inline" class="col-1 requiredTimeKeeper"><asp:Image CssClass="inline" id="Image1" ImageUrl="../../images/requiredfield.gif" runat="server"></asp:Image></span>
   </div>

您可以根据需要的宽度调整col-X，您可以从col-1到col-12

Answer 2

检查Telerik组合框的样式。您需要两个元素都显示为inline或inline-block

另一个选择是给图像绝对定位，并使其相对于相对定位的父元素对齐。这样，您就可以微调其位置。

类似这样的东西：

.combo {
  position: relative;
}

.requiredTimeKeeper {
  position: absolute;
  top: 0;
  right: -10px;
}

<div class="combo">
  <telerik:RadComboBox ID="ddl" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID" NoWrap="true" Width="40%" CausesValidation="false">
  </telerik:RadComboBox>

  <div class="requiredTimeKeeper">
    <asp:Image CssClass="inline" id="Image1" ImageUrl="../../images/requiredfield.gif" runat="server"></asp:Image>
  </div>
</div>

如何使图像与Telerik Radcombobox内联显示

2 个答案: