Увеличить Расстояние до пунктов меню

Question

Возможно, это мой первый вопрос в ASP.Net. Я новичок в веб-программировании и пытаюсь изучить его и читать книгу Wrox ASP.Net 4.0 для начинающих.

Я учился создавать элементы меню, используя Sitemap в качестве источника данных. Я сделал меню и применил источник данных, и он работает нормально. Моя проблема заключается в том, что результат книги имеет элементы меню, отображаемые с идеальным расстоянием. Но мои пункты меню похожи друг на друга, так как они не покрывают длину страницы. Ниже изображения могут помочь понять.

Мои изображения:

Книга Выход:

для источника данных:

Вот мой код меню:

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

Css Класс

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

Так что, в конечном счете, я хочу увеличить расстояние до пунктов меню, как в книжной. В моем CssClass я даже пробовал text-align : justify, но он не работает.

Заранее спасибо.

Answer 1

Добавление этого помогло и решило мою проблему.

.MainMenu ul li 
    { 
     width: 200px; 
    } 

Спасибо и жаль, что беспокоили всех.

Answer 2

Вы можете попробовать padding-right: 50px в вашем классе CSS, чтобы сделать отступом в 50 пикселей справа от каждого элемента.

See this example/explanation для краткого обзора padding-right.