Question

我是新手编码所以请耐心等待，但在我正在处理的页面中，我所做的按钮上的填充被忽略，导致按钮与相邻元素重叠。值得注意的是，我正在使用锚点来制作按钮。

HTML

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

SCSS

$(document).ready(function() {
  console.log('doc is ready');

  $("form").on("submit", function(event) {
    event.preventDefault();
    console.log($(this).serialize());
  });

})

这是我发布的第一个问题所以希望一切看起来都很好。提前谢谢。

Answer 1

添加显示内联块。添加你甚至可以添加边距。

.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>

Answer 2

我在没有所有变量的情况下尝试过它。

a标记是内联元素 - 它们不能高于行本身，因此这是您的重叠问题。将display: inline-block;添加到a标记以阻止此操作，或使用相应的line-height（即足够大以适合填充的a-tag的高度）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用float：left;在你的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>

在css中忽略了锚点上的填充

3 个答案: