0
Hier ist, was ich habe Ein Navigationsmenü mit unbekannter Breite, die ich versuche, es zu zentrieren. Das Problem ist im Hover-Status. Die Breite dieser Navigation wird erweitert, sodass die Regel nicht mehr gilt. (Da die Breite geht über dessen Behälterbreite)Wie man unbekannte Breite Inline-Block-Element in der Mitte Position nach dem Schweben bleiben
#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>Wie Sie sehen können, die #mainNav Breite undefined ist, die so lange seine Breite macht als seine Kinder erweitern.
ich will, wenn ich auf jedem A-Tag, den Mainnav Aufenthalt in der Mittelposition zu ihrem Container schwebe
naja..es tut das schon (geändert mit container auf 100%, vielleicht ist das, was das Problem verursacht. auch hinzugefügt Box-Sizing: border-box) siehe hier https://jsfiddle.net/xzr3xm15/ –
gut in Ihrem Beispiel Sie haben Recht, aber in m y Situation, wenn ich über Elemente schweben die gesamte Breite von Kindern über 1020px, die die Größe meines Containers ist, möchte ich auch wenn das Elternteil in der Breite ist, mein Menü immer noch in der Mitte bleiben –
Ich aktualisierte meine Frage –