Question

我有一个带有菜单栏，横幅（div）和主要部分（容器div）的网页。当窗口调整大小（变小）时，菜单栏会延伸超过窗口的可见区域，从而触发水平滚动条。但是，如果我然后在调整大小的窗口中滚动到右侧，横幅和容器将保持原样并且网站的背景将被暴露。

此外，我现在已经为菜单栏启用了最小宽度，因为我不希望菜单栏碎片在调整大小时以杂乱的方式折叠到下一个可用行。

有没有办法在调整大小时以有条理的方式使条形图折叠，例如：第一行有4个块，第二行有3个块。或者在调整大小期间如何处理菜单栏的任何其他建议？

我也很难将菜单栏正确居中。

以下是包含html和css相关部分的页面的jsfiddle。 http://jsfiddle.net/dj99aq6e/

 <div id="dtitle">
   <h2 id="title">Title</h2>
 </div>

菜单栏的代码：

<!--menu bar STARTS -->

<ul id="sddm">
 <li><a href="" 
    onmouseover="mopen('m1')" 
    onmouseout="mclosetime()">test</a>
 </li>

CSS：

body{
font-family: sans-serif;
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .2); 
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x: auto;
}

html{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow:hidden;
}

#dtitle{
background-color:black;
padding:0;
height:8%;
width:100%;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}

#sddm{
display:table;
margin:10px auto;
margin-bottom: 2px;
padding-left: 0;
min-width: 1050px;
z-index:30;
}


#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font:14px sans-serif
}

#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 128px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}


#sddm li a:hover{
background: #49A3FF}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}


#sddm div a
{   position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 12px sans-serif
}

#sddm div a:hover
{   background: #49A3FF;
    color: #FFF}

Answer 1

这是你想要的吗？ http://jsfiddle.net/dj99aq6e/1/

我从overflow: hidden中取出#dtitle并使用填充

调整文字

#dtitle{
    background-color:black;
    padding:0;
    padding-top: 5px;
    margin-top: -15px;
    height:8%;
    width:100%;

    border:solid;
    border-color: gray;
    border-width:0 0 5px 0;
    min-height: 60px;
}

Answer 2

好的，我明白了。

我给#about（主要内容容器）的最小宽度为1000px，＃dtitle的最小宽度为1050px。 1050px的最小宽度与菜单栏上的最小宽度相匹配，这是关键。现在调整大小然后水平滚动右边的前一个差距就消失了！

我还在联系信息div周围放了一个div，并给它一个1050px的最小宽度，以便它保持正确定位。

以下是更新后的代码：http://jsfiddle.net/dj99aq6e/2/

#dtitle{
background-color:black;
padding:0;
height:8%;
min-width:1050px;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;

菜单栏在窗口调整大小

2 个答案: