CSS按钮：自动迫使他们自己的大小

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

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

这里是代码

#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

来源

2010-01-29 l--' ' ' ' ' ' ---------' ' ' ' ' ' ' ' ' ' ' '

你能举一个你已经写好的代码的例子吗？ – Cerin 2010-01-29 20:18:09

只需为栏中的按钮创建一个类，并在制作它们时将该类添加到新按钮。 – ryanulit 2010-01-29 20:20:51

有些人可能会抱怨，但一张桌子会自动为你调整大小。

<!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>

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

来源

2010-01-29 20:36:04

<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>'; 
}

来源

2010-01-29 20:20:08 Harmen

你真的*明白了他的问题吗？ :) – BalusC 2010-01-29 20:21:46

我想我做了... – Harmen 2010-01-29 20:22:30

请参阅第2点他的问题。 “按钮”必须一起累积到父元素的100％的宽度。在你的例子中，给'ul'一个固定宽度或者'100％'宽度并且尝试让所有'li'元素填充空间，而不考虑'li'元素的数量，*不改变CSS。 – BalusC 2010-01-29 20:23:52

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

我宁愿坚持改变每增加/删除项目的CSS。和它一起生活。

来源

2010-01-29 20:22:49 BalusC

使用javascript解决方案，您的最终用户也将根据他们是否启用javascript而具有不同的体验。 – 2010-01-29 20:45:30

CSS按钮：自动迫使他们自己的大小

回答

相关问题