水平拉伸按钮

时间:2013-08-26 11:46:30

标签: html css

我的任务是创建带圆角的按钮,它将水平拉伸到容器(现在容器只有div)。 它应该在IE8及更高版本中运行。

能否请您提供适当的解决方案,或者有更好的解决方案?

我的解决方案:

.button-streched {
    cursor: pointer;
    width: 100%;
    clear: both;
    background-position: 0px 0px;
}

div.button-show-more div{
    background-repeat: no-repeat;
    height: 34px;
    padding: 0;
}

.button-streched .left {
    float: left;
    background-image: url(/Images/buttton-left.png);
    width: 6px;
    height: 34px;
}

.button-streched .right {
    float: right;
    background-image: url(/Images/buttton-right.png);
    width: 6px;
    height: 34px;
}

.button-streched .middle {
    background-image: url(/Images/buttton-middle.png);
    background-repeat: repeat-x;
    background-color: lightgreen;
    margin: 0px 6px;
    text-align: center;
}

.button-streched span{
    vertical-align: middle;
    line-height: 34px;
}

div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
    background-position: 0 100%;
    cursor: pointer;
}

和HTML:

<div id="btnButton1" class="button-streched" style="">
    <div class="left"></div>
    <div style="width: 100%;">
        <div class="right"></div>
        <div class="middle">
            <span>Do Some Action</span>
        </div>
    </div>
</div>

缩短版本,只是为了证明它有效: http://jsfiddle.net/xMKhZ/

2 个答案:

答案 0 :(得分:0)

您可以使用CSS3 PIE来渲染几个最有用的CSS3装饰功能。

答案 1 :(得分:0)

用这个替换你的CSS。

.button-streched {
    cursor: pointer;
    width: 100%;
    clear: both;
    background-position: 0px 0px;
}

div.button-show-more div{
    background-repeat: no-repeat;
    height: 34px;
    padding: 0;
}

.button-streched .left {
    float: left;
    background-image: url(/Images/buttton-left.png);
    width: 6px;
    height: 34px;
}

.button-streched .right {
    float: right;
    background-image: url(/Images/buttton-right.png);
    width: 6px;
    height: 34px;
}

.button-streched .middle {
    background-image: url(/Images/buttton-middle.png);
    background-repeat: repeat-x;
    background-color: lightgreen;
    margin: 0px 6px;
    text-align: center;
    border-radius:10px;
}

.button-streched span{
    vertical-align: middle;
    line-height: 34px;
}

div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
    background-position: 0 100%;
    cursor: pointer;
}