Question

每当我调整屏幕大小时，屏幕上的所有内容都会保持原样，并且会出现滚动条...除了我的水平列表。它随着屏幕一直移动，然后变成多层并弄乱。我有办法阻止列表移动吗？以前我尝试将{white-space：nowrap}添加到#primary_nav_wrap ul项目。但是，这会导致“委员会”下的下拉变为水平下拉而不是垂直下拉菜单。有没有办法简单地让整个列表不移动，同时不会导致下拉变化？我可以只影响父母而不影响孩子吗？

这是CSS

  #topbar{
  background-color: #636363;
  height:2.4em;
  position:absolute;
  width:81.8em;
  margin: auto;
  top:0;
  }

  #topbar2{
  background-color: #636363;
  height:2.4em;
  position:absolute;
  width:81.8em;
  margin:auto;
  top:10em;
  z-index:-1;
  }

  #title{
  font-family:basic title font;
  color:#ffffff;
  position: absolute;
  top:-0.6em;
  font-size:1.6em;
  left:17.4em;
  z-index:1;
  white-space: nowrap;}

   #logo {
  position:absolute;
  top:2.6em;
  left:36.5em;
  z-index:1;
  width:9em;
  }

  #text
  {font-family:basic title font;
  color:#636363;
  position: absolute;
  left:8em;
  top:0.2em;
  font-size:4em;
  min-width:100%
  z-index:1;}

  #text2
  {font-family:basic title font;
  color:#636363;
  position: absolute;
  left:11.6em;
  top:0.2em;
  font-size:4em;
  z-index:1;}

  body {
  color: #fff;
  font-family: 'open sans'; 
  font-size: 1.1em;
  text-align: center;
  text-decoration:none;
  font-weight:100;
  display:inline;
  overflow-x:none;
  overflow-y: scroll;
  }


  #primary_nav_wrap
  {
        margin-top:15px
  z-index:100;
  }

  #primary_nav_wrap ul
  {
  list-style:none;
  position:absolute;
  float:left;
  margin:0;
  top:10em;
  left:7em;
  padding:0;
  text-align:center;
  }


  #primary_nav_wrap ul a
  {
  display:block;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  line-height:32px;
  padding:0 15px;
  font-family: 'open sans'; 
  font-weight:100;
  font-size: 0.9em;
  color: #ffffff;
  text-align:center;
  padding-top:0.3em;
  padding-bottom:0.3em;
  padding-right:4em;
  padding-left:4em;
  }

  #primary_nav_wrap ul li
  {
  position:relative;
  float:left;
  margin:0;
  padding:0;
  display: inline-block;
    float: none;
    margin: 0 -3px 0 0;

  }

  #primary_nav_wrap ul ul
  {
  display:none;
  position:absolute;
  top:100%;
  left:0%;
  text-align:left;
  background-color:#636363;
  z-index:100;

  }

  #primary_nav_wrap ul ul li
  {
  float:none;
  width:187px;
  padding-left:1em;
  padding-right:1em;

  }

  #primary_nav_wrap ul ul a
  {
  line-height:120%;
  padding:10px 15px;
  }

  #primary_nav_wrap ul ul ul
  {
  top:0;
  left:100%
  }

  #primary_nav_wrap ul li:hover > ul
  {
  display:block
  }


  .hvr-fade {
    display: inline-block;

    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
  }
  .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
   box-shadow:         inset 0 2px 10px -5px #000000;
    background-color: #2098d1;
    color: white;

  z-index:1
  }


  #bottomtext {
  position:absolute;
  bottom:-83%;
  left:43%;
  font-family:"myriad pro";
  font-weight:300;
  color:black;
  font-size:0.8em;
  z-index:10000;}
  #bottomtext2 {
  position:absolute;
  bottom:-89%;
  left:44%;
  font-family:"myriad pro";
  font-weight:200;
  color:black;
  font-size:0.6em;
  z-index:1000000}
  #bottom {
  width:100%;
  height:15%;
  background-color: white;
  position:absolute;
  bottom:-88%;
  z-index:1000;
  }

和HTML

   <!DOCTYPE html>
   <html>

   <head>
   <meta charset='UTF-8'>
   <link rel="stylesheet" type="text/css" href="execs2.css"/>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <meta name="robots" content="all,index,follow" />

       <title>KAS</title>
       <meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />


   </head>

    <body bgcolor="#F0F0F0">>
    <p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
   <p id="intro"></p>
   <p id="text">20 </p>
   <p id="text2">15 </p>

   <p id="bottomtext">Kaohsiung American School <br>
   www.kas.tw </p>
   <p id="bottomtext2">(c) 2015 by STMUN PRESS TEAM</p>
   <div id="bottom"></div>

   <img id="logo" src="images/logo2.png">
   <div id="topbar"></div>
   <div id="topbar2"></div>
   <div id="midbar2"></div>
   <div id="midbar3"></div>
   <div id="bar"></div>
   <div id="bar2"></div>
   <div id="box"></div>
   <div id="textbox"></div>



         <nav id="primary_nav_wrap">
         <ul>
     <li class="hvr-fade" class="current-menu-item"><a href="#">HOME</a></li>
    <li class="hvr-fade" ><a href="#">INTRODUCTION</a></li>

    <li class="hvr-fade"><a href="#">COMMITTEES</a>
     <ul>
         <li class="hvr-fade"><a href="#">Security Council</a></li>
         <li class="hvr-fade"><a href="#">CDIS</a></li>
         <li class="hvr-fade"><a href="#">ECOSOC</a></li>
         <li class="hvr-fade"><a href="#">HRC</a></li>
         <li class="hvr-fade"><a href="#">General Assembly 1</a></li>
         <li class="hvr-fade"><a href="#">General Assembly 2</a></li>
         <li class="hvr-fade"><a href="#">General Assembly 3</a></li>

       </ul>

     <li class="hvr-fade"><a href="#">CONTACT</a></li>
    <li class="hvr-fade"><a href="#">NEWS</a></li>
      <li class="hvr-fade"><a href="#">MORE</a></li>

   </ul>
   </nav>



   </body>
   </html>

谢谢！

Answer 1

如果你不想让LI调整大小，只需将它放在div标签中并将div的样式设置为width = 200px等，如果你想要它调整到一个基点然后停止在样式使用中类似于min-width = 150px

Answer 2

你快到了。

像你一样添加

#primary_nav_wrap
{
   white-space: nowrap;
   ....
}

并添加

#primary_nav_wrap ul ul li
{
   float:left;
   ....
}

而不是

#primary_nav_wrap ul ul li
{
   float: none;
   ....
}

问候。

调整屏幕大小

2 个答案: