Question

当我调整浏览器大小时，我的水平菜单正在换行。我是响应式网络的新手，我已经尝试了之前提到过的其他建议，但没有任何效果。任何建议都会非常有帮助。我的代码就在这个jsfiddle中。

我的代码： --------------- CSS ----------------------

 body{margin:0 auto;padding:0;font: 13px Arial,sans-serif;}
 .clear{clear:both;}
 p,ul,li,a,h1,h2,h3,h4{margin:0;padding:0;}
 h1,h2,h3{margin:10px 0;}
 img.bor{border:#000000 solid 1px;}
 .wrap{margin:0 auto;width:100%;height:auto; border-right:0px solid 
 #FFF;border-left:0px solid #FFF;display: block;}

*{box-sizing: border-box;}
 .row::after {
 content: "";
 clear: both;
 display: table;
 }
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%; }
.col-10 {width: 83.33%; background-color:#ffffff;}
.col-12 {width:100%;}

.header{position:relative;width:100%;height:auto;display:block;}
.title{position:relative;width:100%;height:auto;display:block;}
img {max-width: 100%; height: auto;}

 #dropdownMenu,
 #dropdownMenu ul {list-style: none;}
 #dropdownMenu {display:inline-block; width:100%;}
 #dropdownMenu > li {display:inline-block; height: 2.5em; line-height:2em;
  padding: 0 0em;    text-decoration: none;font-size: 1em;}
 #dropdownMenu li a{display: block;   height: 2.5em;  width:4em; 
 line-height: 2em;  padding: 0 0em; text-decoration: none;font-size: 1em; }
 #dropdownMenu ul {position:absolute; display: none;z-index: ; padding: 0; }

 #dropdownMenu li:hover ul {display: block;}

  /* Main menu------------------------------------------*/
 #dropdownMenu {font-family: Arial; background-color:lightblue;}
 #dropdownMenu > li > a {color: #fff;font-weight: bold;}
 #dropdownMenu > li:hover > a {background: #f09d28;color: #ffffff; } 
 #dropdownMenu li:hover ul.dropdown {display: block; }    /*dropdown*/
 #dropdownMenu a:active ul.dropdown {display: block; }    /*dropdown*/
 #dropdownMenu > li:hover{background: #f09d28;}
 #dropdownMenu li.parentmenu, #dropdownMenu li.parentmenu:hover 
 {padding-top: 4px; width: 13.2em;border-bottom:0px; text-align: 
 center;color: #fff;font-weight: bold; }

 #dropdownMenu a.parentmenu, #dropdownMenu a.parentmenu:hover 
{padding-top: 4px; width: 13.2em;border: 0px; text-align: center; }

/* Submenu------------------------------------------*/
#dropdownMenu ul {background: #ffffff;}
#dropdownMenu ul li a {color: #727272;}
#dropdownMenu ul li:hover a {background: #f0d84f; }

#dropdownMenu a.bord, #dropdownMenu a.bord:hover    
   {border: 1px #d2d2d2; border-bottom: dotted 1px #d2d2d2; border-top: 0px; 
   border-right:solid 1px #d2d2d2; border-left:solid 1px #d2d2d2; 
  height:auto; width: 14.2em;text-align:left;padding:0 0 0 15px;}



   /********HTML CODE**********************/
 <body>
   <!--wrap starts-->
     <div class="wrap">
        <div class="row">
        <div class="col-1">
        </div>

      <!-- header starts-->
        <div class="col-10">
            <div class="header">
                <div class="title">
                    <img src="Images/Title.gif"  alt="welcome" />
                </div>
            </div>
            <div>
        <!--mainmenu starts-->

  <ul id="dropdownMenu">   
   <li class="parentmenu">About Us
      <ul class="dropdown">
          <li><a href="#" class="bord">Contact Us</a></li>            
          <li><a href="#" class="bord" >Deals</a></li>            
          <li><a href="#" class="bord">Wheelz</a></li>
          <li><a href="#" class="bord">Toyz</a></li>
          <li><a href="#"  class="bord">Gears</a></li>            
          <li><a href="#" class="bord">About Us</a></li>            
          <li><a href="#" class="bord">FAQ </a></li>
      </ul> 
   </li>    

    <li class="parentmenu">Related stuff       
        <ul class="dropdown">
             <li><a href="#" class="bord">LM</a></li>            
             <li><a class="bord" href="#" class="bord" >BLC</a></li>            
             <li><a href="#" class="bord">Bjh</a></li>
             <li><a href="#" class="bord">AM</a></li>            
             <li><a href="#" class="bord">Nm</a></li>            
             <li><a href="#" class="bord">SiS</a></li>                 
             <li><a href="#" class="bord">PM</a></li>            
          </ul> 
          </li> 
          <li><a href="#" class="parentmenu">BQ?</a></li>  
          <li><a href="#" class="parentmenu">LL</a></li>  
          <li><a href="#" class="parentmenu">What's New?</a></li>    
          <li><a href="#" class="parentmenu">Contact Us</a></li>
         </ul>
            <!--mainmenu ends-->
            </div>
            </div>
            <div class="col-12">
            </div>
        </div>          
    </div><!--wrap ends-->
</body>

Answer 1

如果您只想要一个水平菜单，请将其视为CSS表：

#dropdownMenu {
  display: table;
  table-layout: auto; /* Container */
}
#dropdownMenu > li {
  display: table-cell;
  vertical-align: middle; /* Each item is a "cell" */
}
#dropdownMenu > li > a {
  white-space: nowrap; /* Prevent text from wrapping into multiple lines */
  padding: 1em;
}

水平菜单包装

1 个答案: