如何制作选项卡导航流体
如何制作选项卡导航流体
提问于 2014-04-18 21:02:29
我的页面顶部有一个导航：
它在大尺寸的桌面屏幕上工作得很好。当我试图在平板电脑(8“或10")中查看它时，菜单会从右边剪裁，例如：
这是我的菜单代码：
<div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
<div id="second-menu-navi" class="navi">
<a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
<a title="" href="physicians.aspx" id="tab-2">Physicians</a>
<a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
<a title="" href="locations.aspx" id="tab-4">Locations</a>
<a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
<a title="" href="radiology.aspx" id="tab-6">Radiology</a>
<a title="" href="lab.aspx" id="tab-7">Lab</a>
</div>
</div>
#second-menu-navi {
float: none !important;
height: 20px !important;
margin: 0 auto;
/*margin: 0px 0px 0px 8px;*/
width: 1106px;
z-index: 24;
}
#second-menu-navi a {
float: left;
width: 155px;
height: 40px;
line-height: 40px;
vertical-align: middle;
font-family: 'aleobold', 'soniano_sans_unicoderegular';
font-size: 16px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background: rgb(20, 94, 153);
background: rgba(20, 94, 153, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
margin: 0 3px 0 0 !important;
/*background-image: none !important;*/
padding: 0 !important;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-khtml-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
outline: none;
}
/*
#second-menu-navi a:hover, #second-menu-navi a.active {
background-color:#155E9B;
}
*/
#tab-1:active, #tab-1:hover {
background-color: #1AA5C1;
}
#tab-2:active, #tab-2:hover {
background-color: #83ADB7;
}
#tab-3:active, #tab-3:hover {
background-color: #7A0506;
}
#tab-4:active, #tab-4:hover {
background-color: #CD71AE;
}
#tab-5:active, #tab-5:hover {
background-color: #E39259;
}
#tab-6:active, #tab-6:hover {
background-color: #422F5E;
}
#tab-7:active, #tab-7:hover {
background-color: #4E68BF;
}
#break-line-2 {
width: 100%;
height: 7px;
border-top: 1px solid #34A25B;
background-color: #013761;
position: fixed;
top: 62px;
z-index: 23;
}我如何使它是流动的，并根据屏幕宽度调整大小？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-19 02:53:15
请参阅演示：http://jsbin.com/folix/2
对于平板电脑，您可以使用特殊css的媒体查询。
有关媒体查询的详细信息，请参阅标准设备的媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#second-menu-navi {
width: 1106px;
margin:0 auto;
z-index: 24;
text-align:center;
}
#second-menu-navi a {
display: inline-block;
padding:12px 30px;
vertical-align: middle;
font-family:'aleobold', 'soniano_sans_unicoderegular';
font-size: 16px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background: rgb(20, 94, 153);
background: rgba(20, 94, 153, .85);
margin: 0 3px 5px 0 !important;
border-radius:0 0 4px 4px;
outline: none;
}
#tab-1:active, #tab-1:hover {
background-color: #1AA5C1;
}
#tab-2:active, #tab-2:hover {
background-color: #83ADB7;
}
#tab-3:active, #tab-3:hover {
background-color: #7A0506;
}
#tab-4:active, #tab-4:hover {
background-color: #CD71AE;
}
#tab-5:active, #tab-5:hover {
background-color: #E39259;
}
#tab-6:active, #tab-6:hover {
background-color: #422F5E;
}
#tab-7:active, #tab-7:hover {
background-color: #4E68BF;
}
#break-line-2 {
width: 100%;
height: 7px;
border-top: 1px solid #34A25B;
background-color: #013761;
position: fixed;
top: 62px;
z-index: 23;
}
@media only screen and (max-width:1024px) {
#second-menu-navi {
width:100%;
}
}
</style>
</head>
<body>
<div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
<div id="second-menu-navi" class="navi">
<a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
<a title="" href="physicians.aspx" id="tab-2">Physicians</a>
<a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
<a title="" href="locations.aspx" id="tab-4">Locations</a>
<a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
<a title="" href="radiology.aspx" id="tab-6">Radiology</a>
<a title="" href="lab.aspx" id="tab-7">Lab</a>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23162284
复制相关文章
相似问题
腾讯云开发者
