0
다음은 내가 가지고있는 것입니다. 가운데에 놓으려는 너비가 알려지지 않은 탐색 메뉴. 문제는 마우스를 올리면이 탐색의 너비가 확장되어 규칙이 더 이상 적용되지 않습니다.알 수없는 너비 인라인 블록 요소를 가져 오는 후 가운데 위치에 유지하는 방법
당신이 볼 수 있듯이
#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;
\t height: 42px;
\t background-color: #f5f5f5;
white-space: nowrap;
outline: 1px solid blue;
}
#mainNav a {
\t transition: all 0.15s ease-in-out;
}
#mainNav a > * {
\t transition: all 0.15s ease-in-out;
}
#mainNav > a {
\t display: inline-block;
\t height: 100%;
\t position: relative;
\t font: 13px/42px "IranYekanWebLight";
\t font-weight: 700;
\t color: #575757;
\t overflow: hidden;
}
#mainNav > a:hover {
\t background-color: #ddd;
}
#mainNav > a:hover span {
\t color: #fff;
\t font-size: 17px;
\t padding-right: 75px;
}
#mainNav > a:hover svg {
\t left: 40%;
\t fill: #fff;
\t animation: 0.3s 1 mainNavAnim;
\t animation-timing-function: ease-out;
}
#mainNav span {
\t padding: 0 28px;
\t position: relative;
\t z-index: 1;
}
#mainNav svg {
\t height: 90px;
\t position: absolute;
\t bottom: -90%;
\t left: 10%;
\t fill: #e3e3e3;
\t z-index: 0;
} <div id="centerContent">
<nav id="mainNav">
\t \t \t <a class="aqua" href="#">
\t \t \t \t <span>aaa</span>
<svg></svg>
</a><a
class="aqua" href="#">
\t \t \t \t <span>bbb</span>
<svg></svg>
</a><a
class="aqua" href="#">
\t \t \t \t <span>ccc</span>
<svg></svg>
</a><a
class="aqua" href="#">
\t \t \t \t <span>ddd</span>
<svg></svg>
</a>
</nav>
</div>#mainNav 폭이 한 아이가 확장됨에 따라 그 폭을하게
undefined입니다 (폭은 컨테이너 폭 이상으로 이동하기 때문에).
나는 각 태그,
을 잘 .. 이미 (컨테이너 100 %로 변경, 어쩌면 그게 문제를 일으키는거야. 또한 상자 크기 : 테두리 상자를 추가) 여기를 참조하십시오> https://jsfiddle.net/xzr3xm15/ –
잘 예를 들어 당신이 맞습니다,하지만 m y 상황 내가 요소에 마우스를 가져 가면 자녀의 전체 너비가 컨테이너의 크기 인 1020px를 초과합니다. 부모가 너비가 더 작아도 메뉴가 여전히 중앙에 있습니다. –
내 질문을 업데이트했습니다. –