CSS定位＆amp;文本

Question

我的注册按钮有CSS代码：

.register-button {
    padding:7px 375px;
    background: #3b7aae;
    border-radius: 5px;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 1px rgba(255,255,255,.25);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    font-size: 20px;
    text-decoration: none;
    position:absolute;
    bottom:-100px;
    left:0px;
    text-align:left;
    text-shadow:2px 2px rgba(0,0,0,.3);
}
    .register-button:hover {
    background-color: #4386be;
}



.register-button span {
    display:block;
    font-weight:normal;

}

HTML看起来像：

<a class="register-button" href="/register">
                Register today, you won't regret it!
            </a>

然后输出：

我的问题很简单，我怎么能让它保持在一条线上，而不是像它在图片中的样子？我已经尝试将位置改为固定和调整顶部; ＆安培;剩下;它只是让事情变得更糟。

Answer 1

从

中减少填充值

.register-button {
    padding:7px 375px;

这样的事情

.register-button {
    padding:7px 35px;

Answer 2

将.register按钮的宽度设置为300px。

这是使用您的代码（http://jsfiddle.net/2WCje/）

的jsFiddle示例

CSS：

.register-button {
    padding:7px 375px;
    background: #3b7aae;
    border-radius: 5px;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    font-size: 20px;
    text-decoration: none;
    position:absolute;
    bottom:-100px;
    left:0px;
    text-align:left;
    text-shadow:2px 2px rgba(0, 0, 0, .3);
    width: 300px;/*----------This will line up the text for you-----------*/
}
.register-button:hover {
    background-color: #4386be;
}
.register-button span {
    display:block;
    font-weight:normal;
}