ASP.NET MVC框架项目，菜单上的CSS问题w.r.t.文本对齐_Css

ASP.NET MVC框架项目，菜单上的CSS问题w.r.t.文本对齐

css

ASP.NET MVC框架项目，菜单上的CSS问题w.r.t.文本对齐,css,Css,我创建了一个新的MVC项目，其中有一个默认的Site.css文件。默认样式在顶部创建一个与右侧对齐的菜单我看了一下样式表，在ul#菜单上，文本对齐设置为右。所以我想把它设为左边会让它一直向左走但事实并非如此。最后坐在中间的某个地方。我错过了什么相关的html是： <body> <div class="page"> <div id="header"> <div id="title">

我创建了一个新的MVC项目，其中有一个默认的Site.css文件。默认样式在顶部创建一个与右侧对齐的菜单

我看了一下样式表，在ul#菜单上，文本对齐设置为右。所以我想把它设为左边会让它一直向左走

但事实并非如此。最后坐在中间的某个地方。我错过了什么

相关的html是：

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div> 

            <div id="menucontainer">

                <ul id="menu">              
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>

文本对齐对齐块元素中的文本。您需要浮动元素

首先，通过将ul#菜单选择器更改为以下方式浮动菜单：

ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    clear: both;
    float: left;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

然后添加此选择器以清除浮动：

#menucontainer:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

谢谢你的回复。“标题”的样式向左浮动，但之后没有明确的标记。当然，您不会知道，因为代码示例中没有这一点。但你确实添加了明确的内容：两者都在ul菜单中，这同样有效！不过我不想让菜单向左浮动，这会让我的主菜单坐在它旁边而不是下面。我想我也可以为main添加另一个clear，我不知道你还添加了什么css，但是我给你的解决方案是有效的。我自己在一个新的MVC站点上尝试过。菜单移到左侧，所有其他元素保持不变。

#menucontainer:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}