对齐文本旁边的图像

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>