Warum sind nicht vier Kinder im Elternteil?

Question

Ich mache derzeit eine footer für meine Website und traf ein sehr unerwartetes Ergebnis. Also, ich habe diese footer mit vier verschiedene Menüs in ihnen, die als die Kinder der footer handeln. Die Menüs sind jeweils auf und display: inline-block; eingestellt, sollte es perfekt passen, sollte es nicht als 100% geteilt durch 4 ist 25%? Das letzte Menü bricht jedoch aus dem footer.

Hier ist ein example von dem, was ich bekomme.

Wie Sie im Beispiel das Journal Menü bricht aus dem Netz, aber die Menüs jeweils auf width: 25%; und display: inline-block; sehen kann.

Was könnte möglicherweise das Problem hier sein und wie kann ich es lösen, ohne meine width von jedem Menü zu überarbeiten?

Ich bin mehr als glücklich, etwas zu geben, um meine Frage zu klären, wenn das nicht genug war.

Hier ist auch der entsprechende Code.

HTML

<footer class="footer"> 
    <div class="container"> 
     <div class="menu-wrapper"> 
      <div class="menu"> 
       <ul> 
        <h6 class="peasant">Explore</h6> 
        <li><a href="#">Our Philosophy</a></li> 
       </ul> 
      </div> 
      <div class="menu"> 
       <ul> 
        <h6 class="peasant">Services</h6> 
        <li><a href="#">Offers</a></li> 
        <li><a href="#">Work</a></li> 
       </ul> 
      </div> 
      <div class="menu"> 
       <ul> 
        <h6 class="peasant">Contact</h6> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
      </div> 
      <div class="menu"> 
       <ul> 
        <h6 class="peasant">Journal</h6> 
        <li><a href="#">Blog</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</footer> 

CSS

footer.footer { 
    height: 500px; 
    width: 100%; 
    background-color: #f8f8f8; 
} 
.menu { 
    width: 25%; 
    display: inline-block; 
    vertical-align: top; 
    white-space: nowrap; 
} 
.footer .menu ul { 
    padding: 0; 
} 

Jede Klärung dessen, was hier passiert und würde geschätzt!

Answer 1

Einfach display: inline-flex; und justify-content: space-between; auf die .menu-wrapper anwenden.

Das sollte es tun.

Answer 2

Inline-Block-Element benötigt etwas mehr Platz (wie 4px). Um diesen Fehler loszuwerden, haben Sie 2 Möglichkeiten. entweder hinzufügen margin-right: -0.25em für das Inline-Block-Element, in Ihrem Fall .menu

oder

Sie font-size und line-height bei Eltern zurücksetzen. in diesem Fall

.menu-wrapper { 
    font-size:0; 
    line-height: 0; 
} 

und verwenden, um die tatsächlichen font-size und line-height im Kind

.menu { 
    font-size: "your font size"; 
    line-height: "your line height"; 
} 

diese

Answer 3

arbeiten, weil Sie einen Raum zwischen ihnen.
Die einzige nicht-Hack-Methode, um es unter Beibehaltung inline-block s zu beheben, ist das Entfernen von Leerzeichen in Markup.
Die anderen Möglichkeiten sind Flex oder Float.
Alles andere (wie Rand oder Schriftgröße) ist Hacks.

body { 
 
    font-size: 2em; 
 
} 
 

 
section { 
 
    margin: .5em 0; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 25%; 
 
    background: silver; 
 
} 
 

 
div:nth-child(even) { 
 
    background: antiquewhite; 
 
}

<section> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</section> 
 

 
<section> 
 
    <div> 
 
    1 
 
    </div><div> 
 
    2 
 
    </div><div> 
 
    3 
 
    </div><div> 
 
    4 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div>1</div><!-- 
 
--><div>2</div><!-- 
 
--><div>3</div><!-- 
 
--><div>4</div> 
 
</section>

Answer 4

Nein nur, dass viel CSS drei Zeile verwenden und hier schreiben müssen, ist Ihre Lösung.

.menu-wrapper { 
 
    display: inline-flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
}

<footer class="footer"> 
 
    <div class="container"> 
 
     <div class="menu-wrapper"> 
 
      <div class="menu"> 
 
       <ul> 
 
        <h6 class="peasant">Explore</h6> 
 
        <li><a href="#">Our Philosophy</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="menu"> 
 
       <ul> 
 
        <h6 class="peasant">Services</h6> 
 
        <li><a href="#">Offers</a></li> 
 
        <li><a href="#">Work</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="menu"> 
 
       <ul> 
 
        <h6 class="peasant">Contact</h6> 
 
        <li><a href="#">Contact Us</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="menu"> 
 
       <ul> 
 
        <h6 class="peasant">Journal</h6> 
 
        <li><a href="#">Blog</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</footer>

Answer 5

Inhalt Pausen des Gitters aus, weil es Tabulatoren zwischen den Menüs:

Diese wird als Raum betrachtet von HTML, und fügen Sie den Gesamt Breite.

Einige Möglichkeiten, dies zu lösen sind:

• die HTML minimieren: https://jsfiddle.net/9cmLaqhp/1/
• hinzufügen float:left; in .menu

Answer 6

Die einfache Lösung dieses .take einen Blick könnte, Wenn Sie möchten, siehe die Demo hier ist die codepen

.footer { 
    height: auto; 
    width: 100%; 
    background-color: #f8f8f8; 
    position:relative; 
    display:block; 
    border:1px solid blue; 
} 
.menu-wrapper { 
    display: inline-flex; 
    justify-content: space-between; 
    width: 100%; 
} 
.menu { 
    width: 25%; 
    display: block; 
    border: 1px solid red; 
    float: left; 
    margin: 0 15px; 
    min-height: 1px; 
    position: relative; 
    height: 150px; 
} 
.footer .menu ul { 
    padding: 0; 
    margin: 0; 
} 
.footer .menu ul li { 
    list-style: none; 
}