Question

我在页面顶部有这些按钮：

家，购买物业，出售物业，社区信息等。

我希望这样当我添加更多按钮时，它们会自动调整大小，我不必调整每个按钮的大小。
我也希望他们占据整个顶栏

这是代码

#cssmenu_moo_menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-attachment:scroll;
background-color:#006198;
background-image:url(../images/moomenu.png);
background-position:50% top;
background-repeat:repeat-x;
float:left;
height:35px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}

我想知道以下是否可以回答我的问题？

CSS Horizontal Navigation, Dynamic Width Buttons, 100% Width, Img Backgrounds

Answer 1

有些人可能会抱怨，但桌子会自动为您量身定做。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Hi</title>
  </head>
  <body>
    <table style="width:100%;">
      <tr>
        <td><input type="button" value="Pick Me 1" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 2" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 3" style="width:100%;" /></td>
      </tr>
    </table>
  </body>
</html>

只需为每个新按钮添加一个新的表数据元素。

Answer 2

这对于纯CSS是不可能的（在语义和交叉浏览器兼容的方式上，因此分别留下<table>和display: table;。你必须带一些JavaScript（jQuery？），但是有一点需要注意，这可能导致“wtf？”体验，因为最终用户可以看到在页面加载时动态调整项目（或调用它的按钮）。

我宁愿坚持在每次添加/删除项目时改变CSS。和它一起生活。

Answer 3

<ul id="menu" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Buying Property</a></li>
    <li><a href="#">Selling Property</a></li>
    <li><a href="#">Community Info</a></li>
</ul>

CSS：

ul#menu {
    list-style-type: none;
}

ul#menu li {
    float: left;
    margin-right: 1em;
    display: block;
}

ul#menu li a {
    padding: .2em;
    background: #CCC;
    /* etc */
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

修改

由于没有纯CSS解决方案，最好使用PHP迭代菜单项：

$pages = array('Page 1' => 'page1.php', 'Page 2' => 'page2.php'); $numPages = count($pages); $width = ceil(99/$numPages); // 99% is the maximum width, 100% could cause some problems with the last menu item foreach($pages as $title => $link){ echo '<li style="width: ' . $width . '"><a href="' . $link . '">' . $title . '</a></li>'; }

css按钮：强制它们自动调整大小

3 个答案: