How do I put images next to text in menuitems without crowding?

Question

User297437924 posted

I have menu items in a asp:Menu control.   If I give them an 'imageURL' as well as text, the 'imageURL' is right on top of the text.  It would be nice if I could put some padding - maybe 1 or 2 pixels, between them.    Can that be done?

Thanks

Answer 1

User409696431 posted

Look at the rendered HTML in the page.  Find whatever class is specific to the menu images, or class/id specific to containers of those images, and write a CSS style to put a bottom margin (if you really meant "on top of the text" or right margin if you really meant beside the text) on images with that class or in that container..

Answer 2

User283571144 posted

Hi RateFor,

Could you please post the details codes about your  asp:Menu control make up? 

I guess you may directly add the text by using MenuItem's property. If you want to put some padding between the image and text, I suggest you could consider using CSS. You could add the margin-right stype for the menu's image item.

Detials, you could refer to below codes:

    <style type="text/css">
       
 #Menu1 img {       
        margin-right:100px;
        } 


    </style>

<div>
            <asp:Menu ID="Menu1" runat="server" ItemWrap="true" Orientation="Horizontal"  StaticEnableDefaultPopOutImage="true" DynamicEnableDefaultPopOutImage="true">
                <Items>
                    <asp:MenuItem ImageUrl="~/image/Jong Suk li.jpg" Text="Jong Suk li"></asp:MenuItem>                 
                </Items>
            </asp:Menu>
        </div> 

Result:

Best Regards,

Brando