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按鈕：自動迫使他們自己的大小

回答

相關問題