其显示如下（示例）

首页||联系我们||用户页面||||联系我们||用户页面||
||联系我们||用户页面||

它不能在比我小的其他计算机显示屏上工作，然后下行到下一行，如上所示。我希望导航栏适合或调整大小，当它打开另一个比我小的计算机屏幕。它应该适合我的屏幕或其他较小的电脑屏幕，如我所示。就像它自动使自己（导航栏）在较小的屏幕上小，并适合更大的屏幕pc浏览器。

这是我的代码（HTML）例如： -

<ul>
<li><a href=#>HOME</a>
</li>
<li><a href=#>ABOUT US</a>
<ul>
<li><a href=#>About 1</a></li>
<li><a href=#>About 2</a></li>


<li><a href=#>student </a>
<ul>
<li><a href=#>EX1</a></li>
<li><a href=#>Ex2</a></li>
<li><a href=#>ex3</a></li>
</ul>
</li>
<li><a href=#>Student 2</a></li>
<li><a href=#>Student 3</a></li>
</ul>
</li>

我的CSS代码

ul {
  list-style: none;
  padding:0;
  margin: 0;
  background: #151B54;

}


ul li {

 display: block; 
  position: relative;
font-weight:bold;
  float:left;
  background: #151B54;
padding:0px;
margin:0;
float:left;


}




li ul { display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

ul li a {
margin:0px;
  display: block;

text-align:left;
  padding: 10px;
  text-decoration: none;
  white-space: nowrap;
  color: white;  
  font-size: 14.1px;

}

ul li a:hover { background: black; }




li:hover > ul {
  display: block;
  position: absolute;


}

li:hover li { float: none; }

li:hover a { background:#151B54; }

li:hover li a:hover { background:black; }



ul ul ul {
  left: 100%;
  top: 0;


}



ul:before,
ul:after {

  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

我还在我的代码之外添加了一个div

<div id="main" style="width:81%;padding-top:0;bottom:0;padding-left:10%;padding-right:20%;height:100%;">

Answer 1

好吧，你可以使用媒体查询。

@media screen and (max-width: 1000px) {
    ul li a {
        font-size: 11px;
    }
}

以上css适用于宽度为1000px或更小的屏幕。

或者您可以使用vw（视口宽度）单位来填充字体大小，填充等...像这样：

ul li a {
  font-size: 2vw;
}

此处的字体大小等于视口宽度的2％。

当屏幕尺寸或分辨率变小时，我的导航栏会缩短？

其显示如下（示例）

1 个答案: