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

【问题标题】：css buttons: forcing them to size themselves automaticallycss 按钮：强制它们自动调整大小
【发布时间】：2010-01-30 04:43:24
【问题描述】：

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

房屋，购买房产，出售房产，社区信息等..

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

这里是代码

#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

【问题讨论】：

你能举一个你已经写的代码的例子吗？
只需为栏中的按钮创建一个类，并在创建新按钮时将该类添加到新按钮中。

标签： html css

【解决方案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>

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

【讨论】：

【解决方案2】：

这对于纯 CSS 是不可能的（以语义和跨浏览器兼容的方式，因此分别将 <table> 和 display: table; 留在外面）。您必须带上一些 JavaScript (jQuery?) 的镜头，但需要注意的是，这可能会导致“wtf?”最终用户可能看到在页面加载时动态调整大小的项目（或您所称的按钮）的体验。

我宁愿坚持在每次添加/删除项目时更改 CSS。忍受它。

【讨论】：

使用 javascript 解决方案，您的最终用户还将获得不同的体验，具体取决于他们是否启用了 javascript。

【解决方案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>';
}

【讨论】：

你真的理解他的问题吗？ :)
见他问题的第 2 点。 “按钮”必须一起累积到父元素的 100% 的宽度。在您的示例中，给ul 一个固定宽度或100% 宽度并尝试让所有li 元素填满空间，无论li 元素的数量如何，没有更改 CSS。