Question

我的项目有问题。我有一些按钮并排。第一个是大的，第二个是中等，第三个是小按钮。除了填充和颜色之外，其中3个按钮具有几乎相同的css属性。当第一个点击时，其他按钮会改变它们的位置。当第二个和第三个被点击时，他们不会沮丧。我知道这发生在持有人填充和第一个，高度。我希望效果像第一个按钮。第二个和第三个只是删除边界，他们不会像第一个一样下来。有没有解决方法可以解决这个问题？

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    color: #FFF;
}
.super-holder {
    display: block;
    text-align: center;
    padding: 20px;
    background-color: #f06060;
    font-size: 20px;
}
a:active, a:hover {
    outline: 0;
}
.btn1 {
    border-radius: 4px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 26px;
    background-color: #9C27B0;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn1:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn2 {
    border-radius: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    background-color: #79B039;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn2:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn3 {
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    background-color: #3F51B5;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn3:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;
}

demo on jsfiddle

Answer 1

在你的css中添加这个

.super-holder div{
    float:left;
    height:80px;
    width:120px;
}
.clear{clear:both}

将您的按钮包裹在div

中

<div class="super-holder">
    <div><a class="btn1">Button</a></div>
    <div><a class="btn2">Button</a></div>
    <div><a class="btn3">Button</a></div>
    <p class='clear'></p>
</div>

以下是 Demo

Answer 2

第一个问题是btn1上的margin-bottom: 4px：有效。如果你这样做，按钮将移动，我认为你不想要。

就边界而言，你可能会更喜欢使用阴影，甚至更好的渐变，你可以在活动时改变。问题是您的边框被添加到按钮的高度，而不是在按钮的边界“内”。相反，请使用以下内容：http://www.colorzilla.com/gradient-editor/生成渐变，该渐变可在元素变为活动时更改。这样，颜色变化将在元素内发生。

Answer 3

更改.button1：活动样式：

.btn1:active {
     position: relative;
     border-bottom: 0px solid rgba(0,0,0,0.21);
     margin-bottom: 4px;  /* <--- THIS */
     color: #FFF;    
 }

按钮会在点击时对小按钮产生不良影响

3 个答案: