html - CSS 定位和文本

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-button 的宽度设置为 300px。

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

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