5
我有一个菜单非常类似于StackOverflow中的菜单。问题是我的菜单在我测试过的每个浏览器中看起来都是正确的,除了我的iPhone。菜单布局适用于所有浏览器除了iPhone
这里是iPhone
现在很明显的“添加事件”按钮应该是大小为其余相同的屏幕截图。
这里是我的标记
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><%: Html.NavigationLink("Now", "Index", "Events")%></li>
<li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li>
<li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li>
<li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li>
<li><%: Html.NavigationLink("Users", "Index", "Users")%></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li>
</ul>
</div>
</div>
这是我的CSS
#menucontainer{position:relative; width:675px; float:right;}
ul.menu
{
padding: 0 0 2px;
position: relative;
margin: 0;
}
ul.menu li
{
display: inline;
list-style: none;
}
ul.menu li a
{
padding: 8px 18px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #666;
color: #fff;
border: 1px solid black;
text-shadow:#000 0px 1px 1px;
}
ul.menu li a.youarehere
{
background-color:@brand_color;
color: #fff;
}
ul.menu li a:hover
{
background-color:@brand_color;
text-decoration: none;
}
ul.menu li a:active
{
background-color:@brand_color;
text-decoration: none;
}
ul.menu li.selected a
{
background-color:@brand_color;
color: #000;
}
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
不幸的是我不知道这一个了。预先感谢任何方向。
编辑:
这是最后的输出被发送到浏览器
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/">Now</a></li>
<li><a href="/events/coming">Coming</a></li>
<li><a href="/events/hot">Hot</a></li>
<li><a href="/tags">Tags</a></li>
<li><a href="/users">Users</a></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><a href="/events/addevent">Add Event</a></li>
</ul>
</div>
</div>
编辑:
上jsbin繁殖
http://jsbin.com/akadi3/2(注:很明显,你需要的iOS浏览器中看到问题)
这很难与ASP.NET MVC相关。请将您的最终标记发布为由浏览器呈现。 – 2010-11-12 18:57:25
我不知道CSS类floatleft和floatright是否与布局有关?你可以发布这些呢? – 2010-11-12 19:01:09
@Mike,完成... @Darin,完成... – 2010-11-12 19:03:36