Question

我有一个主要包含按钮的列表，但也有一个锚点。

修改：每个按钮/锚点在非悬停状态下都有1px边框

当我将悬停在任何<li>上时，我会在<a>或<button>

中添加 2px圆角

为了让<li>在悬停时没有“跳跃”我设置宽度，<li> 4px的高度比按钮/锚点高

我已将display:block设置为锚点。

为什么我的<a>元素看起来与<button>不同？

FIDDLE

即使我添加以下内容来修复锚点的对齐方式：

a.btn:before {
    content: '';
    margin-top: 14px;
}

（的 FIDDLE ）

......我仍然在悬停中获得悬停'跳跃效果。

我该如何解决这个问题？

标记

<ul class="choices">
    <li class="source">
        <a href="#" class="btn">Link</a>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn1</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn2</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn3</button>
    </li>
</ul>

CSS

*
{
    margin:0;padding:0;
}
ul
{
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    background: yellow;
}
a, button /*reset default styles */
{
    margin:0;padding:0;border:0;
    background:transparent;
    outline: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-appearance:none;
    line-height: normal;
    font-family: inherit;
    font-size: 100%;
}
.choices{
    text-align: justify;
}
.choices:after{
    content: '';
    width: 100%;
    display: inline-block;
}
.source{
    width: 122px;
    height: 112px;
    display:inline-block;
}   
.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
}
.btn:hover {
    border: 2px solid #952262;
    background: #f4f4f4;
}
.btn:before {
    content: '';
    display: block;
    background: url(http://placehold.it/50x50) no-repeat;
    margin: 0 auto 10px;
    width: 50px;
    height: 50px;
}

Answer 1

将1px填充添加到正常状态，并在悬停状态下再次将其删除：

.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
    padding: 1px; /** Set it here **/
}
.btn:hover {
    border: 2px solid #952262;
    background: #f4f4f4;
    padding: 0; /** Unset it here **/
}

Answer 2

好吧，如果没有弄清楚为什么你的代码错了，修复它的最简单方法是为.btn类添加透明边框

.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
    border:2px solid transparent;
}

JSFIDDLE

Answer 3

检查此更新 fiddle

实际上我向.btn和a.btn添加了一些边框，并且悬停状态

锚标记与按钮不同

标记

CSS

3 个答案: