【问题标题】：how to make several css buttons on the same line fit specified container width如何使同一行上的多个css按钮适合指定的容器宽度
【发布时间】：2013-06-06 08:36:44
【问题描述】：

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

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

http://bestmarketingnames.com/Tbanneredit_v53.php

为了提高 SEO，客户希望我使用 css 来创建按钮，而不是目前使用的图像。

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

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

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

提前致谢
汤姆

【问题讨论】：

标签： php mysql css

【解决方案1】：

检查工作 DEMO 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>

【讨论】：

谢谢你。但不幸的是，我正在为其工作的客户坚持按钮块的边缘在右侧边缘彼此完全对齐。在您的示例 (jsfiddle.net/yeyene/UfVhD) 中，如果您将按钮中的文本编辑为不同的长度，则右侧的块不会与上方或下方的块完全对齐。我将编辑我的问题以使该要求更清楚。不过感谢您的工作。
再次检查...jsfiddle.net/yeyene/UfVhD/2，您可以使用上面的计算来获得按钮宽度
你可以调整按钮宽度，jsfiddle.net/yeyene/UfVhD/3我用的是你网站的长文本按钮
非常好耶。明天我会和客户核实一下，看看你的方法是否能被他接受。由于所有按钮的宽度相同，它肯定会使在数据库中实现起来更容易。我认为尝试复制目前使用 gif 完成的布局会复杂得多。 (bestmarketingnames.com/Tbanneredit_v53.php)
我重新阅读了你的答案，发现我错过了方程式部分。那么您是否建议使用网站使用的 php 来实现该等式？如果是这样，我会将其实现为每个“mybutton”的属性吗？