html - 当悬停在悬停前的位置中心时，如何保持水平导航列表项的大小增加？

Question

当鼠标悬停在导航列表项(水平排列)上时，该列表项变大并获得边距以在它与与其相邻的其他列表项之间形成间隙，如何使悬停项保持居中于其预置位置？悬停位置，而相邻的元素向左和向右散开？以下是我目前的代码(您也可以在 CodePen 上查看)。

谢谢，田杰

#nav {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 15px;
        right: 15%;
        font-weight: bold;
        }

        #nav:hover {
            }

        #nav li {
            float: left;
            padding: 5px 10px;
            text-align: center;
            }

            li:first-child {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 4px solid white;
                }

            li:nth-child(2) {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

            li:nth-child(3) {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

            li:nth-child(4) {
                border-top: 4px solid white;
                border-right: 4px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

        #nav li:hover {
            box-shadow:
                2px 2px 6px rgba(0, 0, 0, 0.2),
                -2px -2px 6px rgba(0, 0, 0, 0.2),
                -2px 2px 6px rgba(0, 0, 0, 0.2),
                2px -2px 6px rgba(0, 0, 0, 0.2);
            z-index: 5;
            text-align: center;
            background-color: white;
            color: black;
            border: 4px solid rgba(0, 0, 0, 0.2);
            font-size: 1.2em;
            margin: 0 10px;
            }

Answer 1

我只使用 CSS 完成了它。所以关键是使用:

display: inline;

在 li 上，将 ul 包装在一个 div 中，这样您就可以:

text-align: center;

现在它已居中，它将从中心开始生长。我在此处进行了更改 - http://codepen.io/anon/pen/uIdsr