bootstrap3 tabindex 改变我的 CSS 样式

Question

在我的分页列表中，我使用tabindex="" 正确输出伪 :focus 标签。 但是当我为我的链接设置tabindex="" 时，我的风格就坏了。 你可以检查我的问题访问托管的网站http://sun8.hol.es/timberhome/catalog.html 在底部你可以看到我的分页，所以当你点击页面时，样式就坏了。 那么如何修复损坏的样式呢？ 代码： HTML

                    <ul class="pagination">
                    <li><a href="#"><img src="img/catalog/ar_lt.png" alt="Ar lt" /></a></li>
                    <li><a href="#" tabindex="1">1</a></li>
                    <li><a href="#" tabindex="2">2</a></li>
                    <li><a href="#" tabindex="3">3</a></li>
                    <li><a href="#" tabindex="4">4</a></li>
                    <li><a href="#" tabindex="5">5</a></li>
                    <li><a href="#" tabindex="6">6</a></li>
                    <li><a href="#" tabindex="7">7</a></li>
                    <li><a href="#" tabindex="8">8</a></li>
                    <li><a href="#" tabindex="9">9</a></li>
                    <li><a href="#" tabindex="10">10</a></li>
                    <li><a class="more-20" href="#" tabindex="11">...20</a></li>
                    <li><a class="more-30" href="#" tabindex="12">...30</a></li>
                    <li><a class="ar-rt" href="#"><img src="img/catalog/ar_rt.png" alt="Ar lt" /></a></li>
                </ul>

CSS

    /* ************************************CATALOG-PAGINATION******************** */

.left .pagination {
    margin: 32px 0 0 116px;
    width: 489px;
    height: 44px;
    border: 1px solid #d4dfe5;
    border-bottom: 0;
    border-radius: 0;
}

.left .pagination>li>a, .left .pagination>li>span {
    border: 0;
    padding: 11px 0 0 18px; 
    font-family: "PTSans";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #7b878d;
    background-color: inherit;
}

.left .pagination>li>a:hover, .left .pagination>li>a:focus, .left .pagination>li>span:hover,
.left .pagination>li>span:focus {
    color: #000000;
    background: inherit;
    border: 0;
    padding: 11px 0 0 18px; 
    font-family: "PTSans";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.left .pagination>li>a.more-20 {
    margin-left: 6px;
    padding: 11px 0 0 0;
}

.left .pagination>li>a.more-30 {
    margin-left: 6px;  padding: 11px 0 0 0;
}

.left .pagination>li:first-child>a, .pagination>li:first-child>span {
    margin: 0px 4px 0 30px; 
    padding-top: 9px;
}

.left .pagination .ar-rt {
    margin-left: 4px;
    padding: 8px 0 0 18px;
}

Answer 1

.left ul.navi li a:hover, .left ul li a:focus 将宽度设置为 243px，这就是设计被破坏的原因 (style.css on line 621)。

解决方案：

错误：.left ul.navi li a:hover, .left ul li a:focus

ul -> ul.navi

好的：.left ul.navi li a:hover, .left ul.navi li a:focus