如何让三个菜单同时显示

LimStore 2014-07-08 01:02:26

UI设计设计出来的效果如下：

现在在本地开发（window中任何浏览器）也是良好。都可以显示。可是我们这个项目是部署给用户在手机上显示的。现在问题来了。只有一个同事的手机可以看到这个效果（他的手机尺寸大概是6.X）我们都是4.X，只能看到菜单1。
CSS代码如下：



.head{ position:fixed; left:0; bottom:0; z-index:10; width:100%; height:44px; background:#EFEFEF; border-top:1px solid #cacaca; font-size:16px; opacity:0.80;}

.head_search,.head_fav,.head_fav_y{ float:left; overflow:hidden; width:44px; height:44px; border-right:1px solid #cacaca; background:url(../images/icon.png) 0 0 no-repeat; font:0/100em Tahoma;}

.head_fav,.head_fav_y{ background:url(../images/icon.png) -132px -96px no-repeat; font:12px/68px 'microsoft yahei'; text-align:center; color:#666;}

.head_fav_y{ color:#ff9600; background:url(../images/fav.png) 0 -8px no-repeat;}

.head_my,.head_list{ float:right; overflow:hidden; width:44px; height:44px; border-left:1px solid #cacaca; background:url(../images/icon.png) 0 -88px no-repeat; font:0/100em Tahoma;}

.head_list{ background:url(../images/icon.png) 0 -45px no-repeat;}

.head_menu{ position:absolute; left:44px; right:44px; top:-1px; overflow:hidden; display:flex; border:1px solid #cacaca; border-right:none;}

.head_menu a{ display:block; flex:1; position:relative; border-right:1px solid #cacaca; height:43px; line-height:46px; padding-bottom:3px; text-align:center;}

JSP代码如下：



<header>

<div class="head">

	<a href="${ctx}/goods/allcategory" title="" class="head_search"></a>

	<div class="head_menu">

		<a href="${ctx}/index" title="">菜单1</a>

		<a href="${ctx}/goods/allcategory" title="">菜单2</a>

		<a href="${ctx}/cart/list" title="">菜单3</a>

	</div>

</div>

</header>

哪位大神帮忙看看。坐等。。。

...全文

295 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

这块显卡有点冷 2014-08-11

打赏
举报

我也很想知道学习了。

业余草 2014-07-18

打赏
举报

引用 7 楼 ll_3581 的回复:

引用 6 楼 xmt1139057136 的回复:
[quote=引用 5 楼 ll_3581 的回复:] [quote=引用 3 楼 xmt1139057136 的回复:] 三个菜单宽度分别设置小一点
宽度是自动适应的。没有设置呢。。

因为你设置了display:block;块状的样式，所以没有浮动的话，不会吧占一行[/quote]

.head{ position:fixed; left:0; bottom:0; z-index:10; width:100%; height:44px; background:#EFEFEF; border-top:1px solid #cacaca; font-size:16px; opacity:0.80;}
.head_search,.head_fav,.head_fav_y{ position:absolute; left:0; top:0; z-index:11; overflow:hidden; width:44px; height:44px; border-right:1px solid #cacaca; background:url(../images/icon.png) 0 0 no-repeat; font:0/100em Tahoma;}
.head_fav,.head_fav_y{ background:url(../images/icon.png) -132px -96px no-repeat; font:12px/68px 'microsoft yahei'; text-align:center; color:#666;}
.head_fav_y{ color:#ff9600; background:url(../images/fav.png) 0 -8px no-repeat;}
.head_my,.head_list{ position:absolute; right:0; top:0; z-index:11; overflow:hidden; width:44px; height:44px; border-left:1px solid #cacaca; background:url(../images/icon.png) 0 -88px no-repeat; font:0/100em Tahoma;}
.head_list{ background:url(../images/icon.png) 0 -45px no-repeat;}

.head_menu{ margin:-1px 44px 0 44px; overflow:hidden; display:flex; border:1px solid #cacaca; border-right:none;}
.head_menu ul{ width:100%; margin-left:-1px;}
.head_menu li{ float:left; width:33.3%;}
.head_menu a{ display:block; flex:1; position:relative; height:43px; border-left:1px solid #cacaca; line-height:46px; padding-bottom:3px; text-align:center;}
.head_menu .nobor a{ border-left:none;}

这样就好了[/quote] 慢慢写，细心学习

LimStore 2014-07-18

打赏
举报

引用 6 楼 xmt1139057136 的回复:

引用 5 楼 ll_3581 的回复:
[quote=引用 3 楼 xmt1139057136 的回复:] 三个菜单宽度分别设置小一点
宽度是自动适应的。没有设置呢。。

因为你设置了display:block;块状的样式，所以没有浮动的话，不会吧占一行[/quote]

.head{ position:fixed; left:0; bottom:0; z-index:10; width:100%; height:44px; background:#EFEFEF; border-top:1px solid #cacaca; font-size:16px; opacity:0.80;}
.head_search,.head_fav,.head_fav_y{ position:absolute; left:0; top:0; z-index:11; overflow:hidden; width:44px; height:44px; border-right:1px solid #cacaca; background:url(../images/icon.png) 0 0 no-repeat; font:0/100em Tahoma;}
.head_fav,.head_fav_y{ background:url(../images/icon.png) -132px -96px no-repeat; font:12px/68px 'microsoft yahei'; text-align:center; color:#666;}
.head_fav_y{ color:#ff9600; background:url(../images/fav.png) 0 -8px no-repeat;}
.head_my,.head_list{ position:absolute; right:0; top:0; z-index:11; overflow:hidden; width:44px; height:44px; border-left:1px solid #cacaca; background:url(../images/icon.png) 0 -88px no-repeat; font:0/100em Tahoma;}
.head_list{ background:url(../images/icon.png) 0 -45px no-repeat;}

.head_menu{ margin:-1px 44px 0 44px; overflow:hidden; display:flex; border:1px solid #cacaca; border-right:none;}
.head_menu ul{ width:100%; margin-left:-1px;}
.head_menu li{ float:left; width:33.3%;}
.head_menu a{ display:block; flex:1; position:relative; height:43px; border-left:1px solid #cacaca; line-height:46px; padding-bottom:3px; text-align:center;}
.head_menu .nobor a{ border-left:none;}

这样就好了

业余草 2014-07-08