Auto gleich Abstand zwischen Inline-Block-Elementen

Question

ich einige Elemente in einem Inline-Block haben, die derzeit mit

margin-right: 16%; 

ich diese im Abstand gedacht zu haben als Prozentsatz Abstand werden würde es leichter machen, Ansprechbarkeit Website aber bisher Es hat nicht und ich habe eine Menge Haltepunkte, die gerade diese Prozentsätze ständig anpassen.

Was ich mich wundere, ist, wenn es eine Möglichkeit gibt, diese Elemente immer im gleichen Abstand voneinander zu platzieren, ohne Prozentsätze am Rand rechts zu verwenden.

Ich habe versucht, mit: auch

margin-right: auto; 

auf diesem Elemente, aber das schien keine Wirkung zu haben.

Answer 1

Sie können flexbox mit justify-content:space-between verwenden.

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

Oder Tabellenlayout verwenden CSS.

.container { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.container > div { 
 
    display: table-cell; 
 
} 
 
.container > div:nth-child(1) { text-align: left; } 
 
.container > div:nth-child(2) { text-align: center; } 
 
.container > div:nth-child(3) { text-align: right; }

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

Oder Blöcke Verwendung inline mit text-align:justify. Hinweis, es funktioniert möglicherweise nicht mit minimiertem HTML.

.container { 
 
    text-align: justify; 
 
} 
 
.container:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.container > div { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

Answer 2

Im Fall, dass Sie die Unterstützung für ältere Browser, so dass Sie Flexbox nicht verwenden möchten Sie einfach CSS mit Prozentsätzen verwenden können. Hier

ist ein Beispiel für vier <li> Elemente, mit gleichem Abstand:

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
    padding:0; 
 
} 
 

 
ul > li{ 
 
    float:left; 
 
    width:20%; 
 
    margin:2.5%; 
 
    /* 100%/4 <li> = 25% --> 20+2.5% margin each side */ 
 
}

<main> 
 
    <ul> 
 
    <li> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga asperiores rerum animi libero tempora aliquid deleniti harum, ullam ea officia est perferendis dicta, et iusto totam alias maxime at!</p> 
 
    </li> 
 
    <li> 
 
     <p>Eum dolore ab, earum quis perferendis quae quidem nulla quia accusamus repudiandae sint et magnam sed, voluptatum enim sapiente quam aliquid, fuga aliquam odio iure sunt animi, minima dolores praesentium.</p> 
 
    </li> 
 
    <li> 
 
     <p>Cupiditate hic incidunt eaque non quasi velit fugit blanditiis, nisi dignissimos reiciendis, possimus nulla? Id esse eius cupiditate sint quod consequuntur neque, unde a, impedit, itaque dignissimos facere cum dolorum.</p> 
 
    </li> 
 
    <li> 
 
     <p>Nisi odit ut, maxime quibusdam error, placeat eaque optio illum consectetur labore deleniti, dolorum molestias inventore nihil. Eius quos, cum quas incidunt cupiditate commodi ullam error dolores porro velit minima!</p> 
 
    </li> 
 
    </ul> 
 
</main>