Question

我需要在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会给我带来我想要的效果吗？

Answer 1

我从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看到一组属性而另一个浏览器看到另一组属性。

Answer 2

不确定但是：

按钮{min-width：50px;宽度：自动; }

LMK如果能够工作，只要没有浮动就可以工作。

在HTML中制作可扩展按钮

2 个答案: