小编joe*_*aes的帖子

单击列表中的链接时,我必须移动水平导航栏.我创建了一个JSFiddle来说明我的问题.

当用户单击列表中的链接时,列表需要向左或向右滚动.这部分已经完成.

单击链接时,活动链接需要在列表中居中.

链接到JSFiddle: https ://jsfiddle.net/7yq0jq9s/2/

HTML

<div class="container">
<ul>
    <li class="active"> <a href="#">1</a>

    </li>
    <li> <a href="#">2</a>

    </li>
    <li> <a href="#">3</a>

    </li>
    <li> <a href="#">4</a>

    </li>
    <li> <a href="#">5</a>

    </li>
    <li> <a href="#">6</a>

    </li>
    <li> <a href="#">7</a>

    </li>
    <li> <a href="#">8</a>

    </li>
</ul>

CSS

div.container {
    width: 600px;
    overflow: hidden;
}

ul {
    white-space: nowrap;
}

ul li {
    display: inline-block;
    background: green;
}

ul li a {
    padding: 80px;
    display: block;
    color: white;
    font-weight: bold;
    text-decoration: none;
} …