流体宽度菜单使用CSS [英] Fluid width menu using CSS

问题描述

我有一个水平的CSS菜单。问题是当用户创建超过5个菜单项时，li选项卡移动到新行上。我不想让这发生。

如何使它的流体宽度，所以如果用户创建只有3个菜单项，然后每个选项卡增加宽度，以适应全宽？

HTML ：

 < div class =container> 
< div id =new-menu-lower> 
< ul class =menuul> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
< li class =menuli> 
< a href =/ test.aspx>测试< / a> 
< / li> 
 
< / ul> 
< / div> 
< / div> 
   

CSS ：

  div.container 
 {
 clear：both; 
 margin：10px auto 0; 
 width：960px; 
 border：1px solid red; 
 height：700px; 
} 
 
 div＃new-menu-lower {
 border-radius：3px 3px 3px 3px; 
 border-top：0 solid lightgrey; 
 margin：0 8px 10px; 
} 
 
＃new-menu-lower ul {
 border：1px solid white; 
 display：block; 
 height：27px; 
} 
 
＃new-menu-lower ul li：first-child {
 border-left：0 solid lightgrey！important; 
 border-radius：7px 0 0 7px; 
} 
 
＃new-menu-lower ul li {
 background-image：url（http://i45.tinypic.com/16if95z.png）; 
 background-repeat：repeat; 
 border-right：0 solid lightgrey！important; 
 float：left; 
 height：27px; 
 padding-left：10px; 
 padding-right：10px; 
 text-align：center; 
 width：168px; 
} 
  

JSFIDDLE示例： http://jsfiddle.net/rM9MW/

解决方案

demo jsBin

只需在CSS中更改此行：

 ＃new-menu-lower ul {
 
 / * display：block; ////////////////// REMOVE //////////////////// * / 
 display：table; / * //////////////////添加//////////////////// * / 
  

和：

  #new -menu-lower ul li {
 
 / * float：left; ////////////////// REMOVE //////////////////// * / 
 display：table-cell ; / * //////////////////添加//////////////////// * / 
  

I have a horizontal CSS menu. The problem is when the user creates more than 5 menu items the li tabs move onto a new line. I dont want this to happen.

How can I make it fluid width so if the user creates just 3 menu items then each tab increases in width so it fits full width?

HTML:

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>

  </ul>
 </div>
</div>

CSS:

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid white;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 168px;
}

JSFIDDLE EXAMPLE: http://jsfiddle.net/rM9MW/

解决方案

You don't jeed javascript!

demo jsBin

Just change this lines in your CSS:

#new-menu-lower ul {

/*display: block; //////////////////REMOVE//////////////////// */
display:table; /*  //////////////////ADD//////////////////// */

and:

#new-menu-lower ul li {

/* float: left;      //////////////////REMOVE//////////////////// */
display:table-cell; /* //////////////////ADD//////////////////// */

这篇关于流体宽度菜单使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！