CODEWITHSUNDEEP
htmlcssflexbox
Jack The Baker
Jack The Baker

Reputation: 1883

Flex with equal width and margin

I am trying to make each ul li width equal to above element input but li has margin and it can not equal, what I want is equal width with margin. but it is not equal from left and right.

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}


/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}
<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

I made a guide line for better understanding, I want li equal to green line not red one. (also from left)

Upvotes: 2

Views: 2029

Answers (3)

לבני מלכה
לבני מלכה

Reputation: 16251

Set width: calc(100% + 18px); to ul and remove margin/padding-left from odd li

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
width: calc(100% + 18px);
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}
.group ul li:nth-child(odd)  {
padding-left: 0px;
margin-left: 0px;
}

/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}
<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272608

You can adjust margin like below:

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
}

.group ul li {
  width: calc(50% - 13px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}
.group ul li:nth-child(2n) {
  margin-right:-8px;
}
.group ul li:nth-child(2n+1) {
  margin-left:0;
}


/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}
<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10834

  1. Add box-sizing: border-box to your input, so it won't be wider than 100%.
  2. Remove the left and right margin from your li
  3. Set justify-content: space-between to your .group ul - this will set the margin between the items.

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
  box-sizing: border-box;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
  justify-content: space-between;
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
}
<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 5

Related Questions