Question

我的页面顶部有导航：

enter image description here

在大尺寸桌面屏幕上效果很好。当我尝试在平板电脑中查看它时（8＆＃34;或10＆＃34;），菜单会向右切割，例如：

enter image description here

以下是我的菜单代码：

<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;
}

我怎样才能使它变得流畅并根据屏幕宽度调整大小？

Answer 1

请参阅演示：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>

Answer 2

我找到的最快方法是将静态px命令设为％，如果你的最大宽度为1282px，例如像155px这样的像素长度除以1282 155/1282 = 0.12090 #second-menu-navi a{width:1.2090%}保持请注意，您必须为所有水平静态px命令执行此操作。

如何使标签导航流畅

2 个答案: