1

我找不到这个问题的答案，但它一定是以前做过的。

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

http://bestmarketingnames.com/Tbanneredit_v53.php

为了改善 SEO，客户希望我使用 CSS 来创建按钮，而不是目前正在使用的图像。

客户喜欢按钮（或按键）与容器左侧和右侧的垂直边距完美对齐的事实。出于这个原因，我假设 css/php/mysql 必须存储键的宽度信息，或者必须使用适当的百分比，这将导致按钮适当地调整大小以填充，从而使图像完全填充容器 div。此外，如果可能的话，客户更希望键在某种程度上匹配其中单词的总宽度。

我正在使用 php/mysql 生成页面的动态部分，并且正在使用具有 5 列的单个 mysql 表。

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

提前谢谢
汤姆

4

1 回答 1

0

检查工作演示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>
于 2013-06-06T08:44:47.013 回答