Question

在我的分页列表中，我使用tabindex=""来获取正确的输出伪：焦点标记。但当我为我的链接设置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）。

<强> SOLUTION：

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

ul - ＆gt; ul.navi

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

bootstrap3 tabindex改变我的CSS风格

1 个答案: