代码之家 › 专栏 › 技术社区 › Ned Batchelder

在HTML中制作可扩展按钮

localization css html

Ned Batchelder · 技术社区 · 17 年前

我需要在我的HTML中创建“确定”和“取消”按钮,我希望它们是固定宽度的,以便两个按钮的大小相同。例如,像这样:

<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>

我知道我可能无法用纯CSS实现这一点,但我可以使用哪种最简单的HTML来实现我想要的效果?

2 回复 | 直到 17 年前

Ned Batchelder 17 年前

我从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;
}