我有2个按钮,它们具有单独的“活动”伪类,出于某种原因,当我点击其中任何一个时,它会对两者执行转换。
这只是在我正在尝试的代码中,但我想知道是否有一些非常明显的东西我遗失/遗忘?
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn {
border-radius: 4px;
font-family: 'Open Sans', 'sans-serif';
padding: 11px 20px 0px 20px;
font-size: 1.125em;
font-weight: 800;
text-decoration: none;
margin: 20px;
color: #333333;
position: relative;
display: inline-block;
height: 38px;
border-style: solid;
border-width: 1px 1px 2px 1px;
border-color: #333333;
}
.primary {
background-color: #ffffff;
}
.primary:hover {
transition: background-color 0.3s ease;
background-color: #f2f2f2;
}
.primary:active {
transform: translate(0px, 1px);
-webkit-transform: translate(0px, 1px);
border-style: solid;
border-width: 2px 1px 1px 1px;
background-color: #f2f2f2;
}
.secondary {
background-color: #f2f2f2;
}
.secondary:hover {
transition: background-color 0.3s ease;
background-color: #E6E6E6;
}
.secondary:active {
transform: translate(0px, 1px);
-webkit-transform: translate(0px, 1px);
border-style: solid;
border-width: 2px 1px 1px 1px;
background-color: #CCCCCC;
}
<a href="#" class="btn primary">PRIMARY</a>
<a href="#" class="btn secondary">SECONDARY</a>
答案 0 :(得分:3)
这是因为inline-block
的对齐默认值为baseline
。只需将其更改为top
。
.btn {
border-radius: 4px;
font-family: 'Open Sans', 'sans-serif';
padding: 11px 20px 0px 20px;
font-size: 1.125em;
font-weight: 800;
text-decoration: none;
margin: 20px;
color: #333333;
position: relative;
display: inline-block;
vertical-align: top; /* add this */
height: 38px;
border-style: solid;
border-width: 1px 1px 2px 1px;
border-color: #333333;
}
答案 1 :(得分:0)
您是否尝试过为其提供单独的ID值?例如,你可以这样做:
<a href="#" class="btn" id="primary">PRIMARY</a>
<a href="#" class="btn" id="secondary">SECONDARY</a>
并将您的CSS更改为
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn {
border-radius: 4px;
font-family: 'Open Sans', 'sans-serif';
padding: 11px 20px 0px 20px;
font-size: 1.125em;
font-weight: 800;
text-decoration: none;
margin: 20px;
color: #333333;
position: relative;
display: inline-block;
height: 38px;
border-style: solid;
border-width: 1px 1px 2px 1px;
border-color: #333333;
}
#primary {
background-color: #ffffff;
}
#primary:hover {
transition: background-color 0.3s ease;
background-color: #f2f2f2;
}
#primary:active {
transform: translate(0px, 1px);
-webkit-transform: translate(0px, 1px);
border-style: solid;
border-width: 2px 1px 1px 1px;
background-color: #f2f2f2;
}
#secondary {
background-color: #f2f2f2;
}
#secondary:hover {
transition: background-color 0.3s ease;
background-color: #E6E6E6;
}
#secondary:active {
transform: translate(0px, 1px);
-webkit-transform: translate(0px, 1px);
border-style: solid;
border-width: 2px 1px 1px 1px;
background-color: #CCCCCC;
}
答案 2 :(得分:0)
看起来每次点击一个按钮都会为它添加1px边框,这就是为什么它会将另一个按钮向下移动的原因。如果您从display: inline-block
移除了.btn
属性,而是将其向左浮动,则问题将不再发生,或者您可以向vertical-align: top;
添加.btn
属性。