Question

我正在将我的网站转换为自适应布局。我已经使用媒体查询实现了大部分内容，但无法使用菜单（仅使用CSS和HTML）工作;它仍然是920px。

代码如下：

<div class="navigation_bar">

    <div id="main_menu">
        <div class="menu-main-menu-container">
            <ul class="homedropdown" id="menu-main-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://localhost/safesteps/fire/">Fire</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://localhost/safesteps/flood/">Flood</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://localhost/safesteps/typhoons/">Typhoons</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45" id="menu-item-45"><a href="http://localhost/safesteps/earthquake/">Earthquake</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46" id="menu-item-46"><a href="http://localhost/safesteps/emergency-kit/">Emergency Kit</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47" id="menu-item-47"><a href="http://localhost/safesteps/pandemics/">Pandemics</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48" id="menu-item-48"><a href="http://localhost/safesteps/droughts/">Droughts</a></li>
            </ul></div>               </div>

    <div class="clear"></div>
</div>

CSS

   .navigation_bar {
        background: none repeat scroll 0 0 #E1E1E1;
        height: 46px;
        margin: 0;
        width: 100%;
    }

ul.homedropdown a {
    background-image: none;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 0;
    padding: 0 18px;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    vertical-align: baseline;
}
ul, li {
    list-style: none outside none;
}

以下是当前布局的屏幕截图：

enter image description here

如何解决此问题？

Answer 1

如果您希望在浏览器窗口宽度低于920px时网站保持固定宽度，请尝试使用min-width css-property，如下所示：


    body {min-width: 960px;} //this is your main container class and will apply a minimum width of 960px to the entire site

    .navigation_bar {
        background: none repeat scroll 0 0 #E1E1E1;
        height: 46px;
        margin: 0;
        width: 100%;
        min-width: 920px; //this might need to be increased a bit
    }

这不是最好的方法（并没有真正的响应），对许多人来说有点太硬编码，但它通常效果很好。菜单将消失，但浏览器窗口底部会出现一个滚动条。您还可以尝试使用百分比或动态属性来调整响应度。

让菜单栏响应

1 个答案: