计算

Question

我找不到这个问题的答案，但必须在此之前完成。

我有四行小图像在一种kyboard布局中形成“键”（见链接）：

http://bestmarketingnames.com/Tbanneredit_v53.php

为了改善搜索引擎优化，客户希望我使用css创建按钮而不是目前使用的图像。

客户喜欢这样的事实：按钮（或键）与容器的左侧和右侧的垂直边距完全对齐。出于这个原因，我假设css / php / mysql必须存储密钥的宽度信息，或者必须使用适当的百分比，这将导致按钮大小适当地填充，因为图像完全填充容器DIV。此外，如果可能的话，客户端希望密钥与它们中的单词的总宽度有些匹配。

我用php / mysql生成页面的动态部分，并使用一个包含5列的mysql表。

是否有一种简单的方法可以使用css来创建按钮？我宁愿不必将css按钮图像宽度存储在数据库中，但如果我必须，我可以。

提前致谢
汤姆

Answer 1

检查工作演示http://jsfiddle.net/yeyene/UfVhD/3/

计算

每行按钮数=（按钮数/ 4）

然后，

每个按钮宽度=（每行中的内容宽度/按钮数） - （每行按钮数*左边距2px）

CSS

ul#myButtons { 
    background:#d6d6d6; 
    padding:5px; 
    float:left; 
    width:920px;}

ul#myButtons li {
    list-style:none; 
    float:left; 
    width:100px; 
    margin:1px; /*Try deleting this float float:left; */
}

ul#myButtons li a { 
    display:block; 
    background:#aaa; 
    color:#444; 
    padding:2px 6px; 
    font:normal 12px Arial; 
    text-decoration:none; 
    text-align:center;
    margin-bottom:1px; 
}
ul#myButtons li a:hover { 
    background:#f0f0f0;
}

HTML

<ul id="myButtons">
    <li><a href="#">aaaa</a></li>
    <li><a href="#">aaaa</a></li>
    <li><a href="#">aaaa</a></li>
    <!-- links go on -->
</ul>

如何在同一行上制作几个css按钮符合指定的容器宽度

1 个答案:

计算

CSS

HTML