ASP.NET MVC skeleton project, CSS question on the menu w.r.t. text-align
I create a new MVC project and there is a default Site.css file. The default style creates a menu at the top, aligned to the right.
I look at the stylesheet, and I see on ul#menu, the text-align is set to right. So I'm thinking setting it to left will make it go all the way to the left.
But it doesn't. It ends up sitting somewhere in the middle. What am I missing?
The relevant html is:
<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>
And the CSS:
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-开发者_开发问答color: #e8eef4;
color: #034af3;
}
ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a
{
background-color: #fff;
color: #000;
}
Text-align justifies text within a block element. You need to float the elements.
First, float the menu by changing the ul#menu selector to this:
ul#menu
{
border-bottom: 1px #5C87B2 solid;
clear: both;
float: left;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
And than add this selector to clear the float:
#menucontainer:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
加载中,请稍侯......
精彩评论