logo标签列表

CSS按钮：强制自动调整大小

htmlcss
3

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

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

  1. 我希望添加更多按钮时它们可以自动调整大小，而不需要手动调整每个按钮的大小。

  2. 同时，我希望它们占据整个顶部栏。

以下是代码：

#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水平导航，动态宽度按钮，100%宽度，带图像背景
1
你能给一个你已经写过的代码的例子吗？ - Cerin
只需为栏中的按钮创建一个类，并在创建新按钮时将该类添加到这些按钮中即可。 - ryanulit
3个回答
4
一些人可能会抱怨，但表格会自动为您调整大小。
<!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>

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

3
这在纯CSS中是不可能实现的（以语义和跨浏览器兼容的方式，因此需要将<table>和display: table;排除在外）。你需要使用一些JavaScript（jQuery？）来完成这个功能，但这有一个缺点，那就是在页面加载时，最终用户可能会看到项目（或您所称的按钮）在动态调整大小，这可能会让人感到困惑。我更倾向于在每次添加/删除项目时修改CSS样式，并接受这种情况。
使用JavaScript解决方案，您的最终用户的体验也会因为他们是否启用了JavaScript而有所不同。 - Nick Larsen
0
<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>';
}
你真的理解他的问题了吗？ :) - BalusC
1
请看他问题中的第二点。 "按钮"必须累加到父元素的100％宽度。在您的示例中，为ul设置固定宽度或100％宽度，并尝试使所有li元素填充空间，而不管li元素的数量，无需更改CSS。 - BalusC
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接