Question

Probably its my first question in ASP.Net. I am new to Web-Programming and trying to learn it and reading book Wrox ASP.Net 4.0 for Beginners.

I was learning to create Menu Items by using Sitemap as datasource. I made menus and applied the datasource and it is working fine. My problem is, the book result has the menu items displayed with perfect distance. But my Menu items are like placed just beside each other means they don’t cover the length of the page. Below images may help to understand.

My Image:

Book Output:

for datasource:

Here is my code for menu:

<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
    DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
    StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="16px">
</asp:Menu?

Css Class

.MainMenu
    {
        border: 1px solid white;
        width: 814px;
        height: 19px;
        background-color : #cccccc;
        text-align : justify;
    }

So ultimately I want to increase the menu items distance like that of book. In my CssClass I even tried text-align : justify but its not working.

Thanks in advance.

Answer 1

Adding this helped and solved my problem.

.MainMenu ul li
    {
        width: 200px;
    }

Thanks and sorry for bothering everyone.