忽略填充在CSS錨點

我是新來編碼，所以請耐心等待，但在我正在工作的一個頁面上，我所做的按鈕上的填充被忽略，導致按鈕重疊相鄰元素。值得注意的是，我正在使用錨來製作按鈕。忽略填充在CSS錨點

HTML

<a class = "classicbtn">Sign Up</a>

SCSS

.classicbtn { 
    background-color: $primary-color; 
    border-radius: 2rem; 
    box-sizing: border-box; 
    color: $white; 
    font-size: 1.2rem; 
    font-weight: bold; 
    padding: 1rem 4rem; //this is what is ignored. Background wraps into the next div 
    margin: 0 auto; 
    text-decoration: none; 
    text-align: center; 
    &:hover { 
     background-color: $button-hover;  
    } 
    &:active { 
     background-color: $button-active; 
    } 
    }

這是我的第一個問題貼，所以希望一切都看起來不錯。提前致謝。

來源

2017-04-25 D. Stagg

我試過沒有所有的變量。

a標籤是內聯元素 - 它們不能高於行本身，所以這是您的重疊問題。添加display: inline-block;到a標籤來防止這種情況，或者使用根據line-height（即足夠大，以適應您的填充一個標籤的高度）

.classicbtn { 
 
    background-color: #fb7; 
 
    border-radius: 2rem; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
    padding: 3rem 4rem; //this is what is ignored. Background wraps into the next div 
 
    margin: 0 auto; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    display: inline-block; 
 
    }

<p>test test test test test test test test</p> 
 
<p>test test<a class = "classicbtn">Sign Up</a>test test</p> 
 
<p>test test test test test test test test</p>

來源

2017-04-25 19:13:06 Johannes

添加顯示inline-block的。添加你甚至可以添加利潤。

.classicbtn { 
 
    background-color: red; 
 
    border-radius: 2rem; 
 
    box-sizing: border-box; 
 
    color: $white; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
    padding: 1rem 4rem; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<a class = "classicbtn">Sign Up</a>

來源

2017-04-25 19:15:52 blecaf

使用浮動：左;在你的CSS。

.classicbtn { 
 
    background-color: green; 
 
    border-radius: 2rem; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
    padding: 1rem 4rem; 
 
    margin: 0 auto; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    float:left; 
 
}

<a class = "classicbtn">Sign Up</a>

來源

2017-04-25 19:21:20 Nimish

忽略填充在CSS錨點

回答

相關問題