css - 将图像与文本对齐

Question

这是我们使用和 css 所做的图像。我正在尝试在 RAD 菜单中实现相同的功能。

如何将图像与 Radmenuitem 中的文本对齐？此图像在我的解决方案中。

在此图像中，将鼠标悬停在文本上，图像将滑动菜单。如何在 radmenu 中做到这一点？

<telerik:RadMenuItem ID="riComm" runat="server" Text="Communication" BackColor="#333333" CssClass="Cursor"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="riUpcoming" runat="server" Text="Appointment Book" BackColor="#333333" CssClass="Cursor"></telerik:RadMenuItem>

Answer 1

请尝试使用以下代码片段。

<style>
    .RadMenu .rmLeftImage {
        float: right !important;
    }
</style>
.......
.......
<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Communication" runat="server" ImageUrl="http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/expanddirection/Images/expandDirection/down.png">
            <Items>
                <telerik:RadMenuItem Text="Communication1" runat="server"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Communication2" runat="server"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Appointmnent book" runat="server" ImageUrl="http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/expanddirection/Images/expandDirection/down.png">
            <Items>
                <telerik:RadMenuItem Text="Appointmnent book1" runat="server"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Appointmnent book2" runat="server"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>