2

我需要在我的 HTML 中制作 OK 和 Cancel 按钮，并且我希望它们具有固定宽度，因此两个按钮的大小相同。例如，像这样：

<style>
button.ok_cancel {
    width: 50px;
    background-color: #4274af;
    font-size: 9px;
    line-height: 12px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    padding: 1px;
    border: 0px;
    margin: 0 0 0 5px;
    text-align: center;
    letter-spacing: 1px;
}
</style>

<button class="ok_cancel" onclick="do_cancel()">Cancel</button>

但现在我正在本地化文本，“取消”的翻译对于按钮来说可能太宽了。如果字符串适合，我希望按钮的固定宽度为 50 像素，但如果字符串更宽，我希望按钮的宽度扩大。将使用固定数量的侧边距来保持按钮看起来不错。

我知道我可能无法使用纯 CSS 来做到这一点，但是我可以使用的最简单的 HTML 是什么，它会给我想要的效果？

4

2 回答 2

3

我从 twodayslate 的回答开始工作，结果是这样的：

/* Browser hack! This is for everyone: */
button {
    display: inline;
    cursor: pointer;
    padding: 6px 6px;
    width: 50px;
    overflow: visible;
}
/* and this is for non-IE browsers: */
html>body button {
    min-width: 50px;
    width: auto;
}

IE 想要一个指定的宽度和溢出可见，其他浏览器想要一个最小宽度和宽度自动。CSS hack 让 IE 看​​到一组属性，而另一个浏览器看到另一组。

于 2008-12-10T01:20:12.490 回答
0

不确定，但是：

按钮{最小宽度：50px；宽度：自动；}

LMK 如果这行得通，它应该可以工作，只要它不浮动。

于 2008-12-09T02:15:53.050 回答