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 的宽度设置为 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;
}