如何使未知宽度的内嵌块元素在悬停后保持在中心位置

Question

这就是我所拥有的 宽度未知的导航菜单，我尝试将其居中。 问题出在悬停状态，此导航的宽度会扩展，因此规则不再适用。 （因为宽度超过其容器宽度）

＆＃13;

＆＃13;

  #centerContent {
    width: 300px;
    margin: auto auto;
    padding: 110px 30px 30px 30px;
    background-color: #fff;
    text-align: center;
    outline: 1px solid red;
    }
        #mainNav {
        display: inline-block;
    	height: 42px;
    	background-color: #f5f5f5;
        white-space: nowrap;
        outline: 1px solid blue;
    }
    
    #mainNav a {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav a > * {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav > a {
    	display: inline-block;
    	height: 100%;
    	position: relative;
    	font: 13px/42px "IranYekanWebLight";
    	font-weight: 700;
    	color: #575757;
    	overflow: hidden;
    }
    
    #mainNav > a:hover {
    	background-color: #ddd;
    }
    
    #mainNav > a:hover span {
    	color: #fff;
    	font-size: 17px;
    	padding-right: 75px;
    }
    
    #mainNav > a:hover svg {
    	left: 40%;
    	fill: #fff;
    	animation: 0.3s 1 mainNavAnim;
    	animation-timing-function: ease-out;
    }
    
    #mainNav span {
    	padding: 0 28px;
    	position: relative;
    	z-index: 1;
    }
    
    #mainNav svg {
    	height: 90px;
    	position: absolute;
    	bottom: -90%;
    	left: 10%;
    	fill: #e3e3e3;
    	z-index: 0;
    }

＆＃13;

          <div id="centerContent">
            <nav id="mainNav">
    			<a class="aqua" href="#">
    				<span>aaa</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>bbb</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ccc</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ddd</span>
                    <svg></svg>
                </a>
           </nav>
        </div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，#mainNav宽度为undefined，宽度与其子项一样长。

我希望当我悬停在每个A标签上时，mainNav会保持在其容器的中心位置

Answer 1

您可以使用包含以下样式的包装块：

＆＃13;

＆＃13;

#centerContent {
    width: 700px;
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    }
        #mainNav {
        display: inline-block;
    	height: 42px;
    	background-color: #f5f5f5;
        white-space: nowrap;
    }
    
    #mainNav a {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav a > * {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav > a {
    	display: inline-block;
    	height: 100%;
    	position: relative;
    	font: 13px/42px "IranYekanWebLight";
    	font-weight: 700;
    	color: #575757;
    	overflow: hidden;
    }
    
    #mainNav > a:hover {
    	background-color: #ddd;
    }
    
    #mainNav > a:hover span {
    	color: #fff;
    	font-size: 17px;
    	padding-right: 75px;
    }
    
    #mainNav > a:hover svg {
    	left: 40%;
    	fill: #fff;
    	animation: 0.3s 1 mainNavAnim;
    	animation-timing-function: ease-out;
    }
    
    #mainNav span {
    	padding: 0 28px;
    	position: relative;
    	z-index: 1;
    }
    
    #mainNav svg {
    	height: 90px;
    	position: absolute;
    	bottom: -90%;
    	left: 10%;
    	fill: #e3e3e3;
    	z-index: 0;
    }

＆＃13;

 <div id="centerContent">
            <nav id="mainNav">
    			<a class="aqua" href="#">
    				<span>aaa</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>bbb</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ccc</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ddd</span>
                    <svg></svg>
                </a>
           </nav>
        </div>

＆＃13;

＆＃13;

＆＃13;