增加菜单项距离

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 Class

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

所以最终我想增加菜单项距离，比如书。在我的CssClass中，我甚至尝试text-align : justify，但它不起作用。

提前致谢。

Answer 1

您可以在CSS类中尝试padding-right: 50px，在每个项目的右侧填充50像素。

See this example/explanation简要概述padding-right。

Answer 2

添加这有助于解决我的问题。

.MainMenu ul li
    {
        width: 200px;
    }

非常感谢和抱歉打扰每个人。