如何使图像与 telerik radcombobox 内联显示

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

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

Answer 2

你可以使用 bootstrap 类: 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>

You can adjust the col-X depending on the width you are looking for, you have available from col-1 to col-12

如何使图像与 telerik radcombobox 内联显示

How to make image appear inline with telerik radcombobox

css

telerik