Lücken zwischen Listenelementen und geheimnisvollen Abstand in DIV

Question

Siehe meine hier codepen: http://codepen.io/Chiz/pen/XKBbok

1) Wie kann ich loswerden der kleinen Lücken zwischen den roten Kästen? Ich habe Padding und Rand auf 0 gesetzt, aber es gibt immer noch Lücken.

2) In der violetten Box (.container) ist der Platz auf der rechten Seite mehr als der Platz auf der linken Seite. Ich habe versucht, die UL innerhalb .container mit "margin: 0 auto;" aber es hat keine Wirkung.

Tks!

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container 
 
{ 
 
    border:1px solid blue; 
 
    width:65%; 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    border:1px solid purple; 
 
    margin:0 auto; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    color: grey; 
 
    text-align: center; 
 
    width: 10rem; 
 
    height: 8rem; 
 
    margin: 0; 
 
    padding: 0; 
 
    position:relative; 
 
} 
 

 
ul li div 
 
{ 
 
    border:1px solid green; 
 
    position:absolute; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    left:0; 
 
    right:0; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Home 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Plants 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Land 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Animals 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />About 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

1) inline-block Anzeigeelemente inline wie Text, so dass jeder Raum zwischen den Elementen wird eine Lücke schaffen. Entfernen Sie den Raum zwischen <li> Ende und Start-Tags, also </li><li>

2) Da die <li> Elemente inline-block sind, müssen Sie Ihre margin: 0 auto; zu text-align: center;

Answer 2

Im Hinblick auf Ihre erste Frage, du begegnen Sie den natürlichen Abstand zwischen Inline-Elemente. Stellen Sie sich die Lücken als den Abstand zwischen Wörtern in einem Absatz vor. Wenn Sie die Leertaste zwischen Wörtern in Ihrem Code drücken, gibt der Browser ein Leerzeichen auf dem Bildschirm aus.

Es gibt verschiedene Möglichkeiten, diese Lücken zu entfernen. Eine Möglichkeit ist, die Räume zwischen den inline-block Elemente in Ihrem Code zu entfernen: Revised Codepen

Hier ist eine ausführlichere Erklärung zusammen mit anderen Lösungen: https://stackoverflow.com/a/32801275/3597276

Hinsichtlich der Abstand Problem ist, desto größer Leerzeichen auf der rechten Seite von der Behälter ist wegen der Verpackung. Genauer gesagt, ein Container weiß nicht, wann es untergeordnete Elemente umschließt, sodass das schmalere Layout nicht automatisch verkleinert wird.

Hier sind weitere detaillierte Erläuterungen und Beispiele:

• https://stackoverflow.com/a/32811002/3597276
• https://stackoverflow.com/a/37413580/3597276

Answer 3

ul { 
font-size:0; 
text-align:center; 
} 
ul li { 
font-size:16px; 
} 

fügen Sie den oben Stil in Ihrem Stylesheet ändern

Answer 4

Ersetzen Sie das folgende Markup über ul und ul li:

ul { 
list-style-type: none; 
border:1px solid purple; 
margin:0 auto; 
width:100%; 
text-align:center; 
padding:0; 
    } 

ul li { 
    display: inline-block; 
    border: 1px solid red; 
    color: grey; 
    text-align: center; 
    width: 10rem; 
    height: 8rem; 
    margin: -2px; 
    padding: 0; 
    position:relative; 
} 

Answer 5

Probieren Sie die folgenden Codes aus: Sie können den Abstand zwischen li entweder durch Hinzufügen von float:left oder margin-left reduzieren. Standardmäßig ul hat einige padding-left, die Sie 0 setzen müssen, oder Sie können es left and right Abstand festlegen, indem Sie padding zu ul zuweisen.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container 
 
{ 
 
    border:1px solid blue; 
 
    width:65%; 
 
    height:60px;/*Added*/ 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    border:1px solid purple; 
 
    margin:0; 
 
    padding:0 48px;/*Added*/ 
 
} 
 

 
ul li { 
 
    display:inline-block; 
 
    border: 1px solid red; 
 
    color: grey; 
 
    text-align: center; 
 
    position:relative; 
 
    list-style-type: none; 
 
    margin:0px -3px;/*Added*/ 
 
    padding:10%; 
 
} 
 

 
ul li div 
 
{ 
 
    border:1px solid green; 
 
    position:absolute; 
 
    transform:translateY(-50%); 
 
    left:0; 
 
    right:0; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Home 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Plants 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Land 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />Animals 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <i class="fa fa-spinner"></i><br />About 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>