CODEWITHSUNDEEP
htmlcssinlinemargins
user5365562
user5365562

Reputation:

Auto equal distance between inline block elements

I have some elements in an inline-block that are currently being spaced with 

margin-right: 16%;

I thought having these spaced as a percentage would make it easier for site responsiveness but so far it has not and I seem to have a lot of breakpoints that are constantly adjusting just these percentages.

What I am wondering, is if there is a way to always space these elements an equal distance apart without using percentages on margin right.

I tried using:

margin-right: auto;

on these element as well, but that seemed to have no affect.

Upvotes: 1

Views: 2623

Answers (2)

fbid
fbid

Reputation: 1570

In case you need support for older browsers, so you don't want to use flexbox you can use simple CSS with percentages.

Here is an example of four <li> elements, equally spaced:

*{
  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>

Upvotes: 0

Stickers
Stickers

Reputation: 78716

You can use flexbox, with justify-content:space-between.

.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Or, use CSS table layout.

.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>

Or, use inline blocks with text-align:justify. Note, it may not work with minified 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>

Upvotes: 2

Related Questions