CSS定位與文本

我已經得到了CSS代碼爲我的註冊按鈕：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>

然後，它輸出這樣的：

enter image description here 我的問題很簡單，我怎麼能把它留在一條線上，而不是像它在畫面中那樣？我試圖改變立場來固定和調整頂部; &剩下的;它讓事情變得更糟。

來源

2013-10-14 Tyler James

的.register按鈕的寬度設置爲300像素。

下面是使用你的代碼（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; 
}

來源

2013-10-14 02:18:58

謝謝！這工作完美。我將寬度添加到適當的寬度，然後我調整了「text-align：left;」以文本對齊：center;它像一個魅力一樣工作。 –

從

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

降低您的填充值，以這樣的

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

來源

2013-10-14 02:10:50

那麼，它有它的一條線，但它縮水： HTTP：//i.imgur。 com/fFf9cGn.png –

CSS定位與文本

回答

相關問題