html - 更改浏览器分辨率时的设计问题

Question

我正在这个网站http://zap3d.com上工作，当我更改浏览器窗口的大小时，顶部菜单栏的一些问题菜单背景被切断。

请帮忙。

我将此 CSS 用于顶部菜单：-

 .nav_bar {
    float: right;
    width: 100%;
    background: url(/content/img/top-menu-bg.gif);
    height: 30px;
    background-size: contain;
    }
.cen_div {
width: 1000px;
margin: 0 auto;
}
.nav_bar .nav {
list-style: none outside none;
float: right;
margin: 0;
padding: 0 0 0 20px;
position: relative;
}
.nav_bar .nav li {
float: left;
margin: 3px 7px;
}

和 html :-

<div class="nav_bar">
    <div class="cen_div">
        <ul class="nav">
            <li><a href="/Home/Index">Home</a></li>
            <li><a href="/Account/Registration/">Sign Up</a></li>   
        </ul>
    </div>
</div>

Answer 1

您需要在较小的窗口上设置 min-width: 1040px;并body使其nav_bar成为可能。

Answer 2

你只需要重复背景：

.nav_bar {
    ....
    background: url(/content/img/top-menu-bg.gif) repeat-x ;
    ...
}