Ul list with dynamic width independent of items

Question

Ul list with dynamic width independent of items

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (-1 votes)

-1

I have a list with several blocks, I would like the width of the UL to be dynamic, if I delete a <li> the size of the accompany list without breaking the alignments, it needs to serve 1 block, 3 blocks, 6 blocks

.bloco {
	background:#CCC;
	padding:0;
	min-height: 150px;
	max-width:600px;
	padding: 4px;
}

.item {
	display: inline-block;
	border: solid 1px;
	margin-bottom:5px;
	min-height: 100px;
	width: 24%;
}

<ul class="bloco">
		<li class="item">
			1
		</li>
		<li class="item">
			2
		</li>
		<li class="item">
			3
		</li>
		<li class="item">
			4
		</li>	
		<li class="item">
			5
		</li>		
	</ul>

css

asked by anonymous 10.02.2017 / 12:44

3 answers

3

This works by decreasing size up to 6 items:

.bloco {
  background:#CCC;
  padding:0;
  min-height: 150px;
  max-width:600px;
  padding: 4px;
}

.item {
  transition: all 0.42s;
  display: inline-block;
  border: solid 1px;
  box-sizing: border-box;
  margin-bottom:5px;
  min-height: 100px;
  float: left;
}

li:first-child:nth-last-child(1) {
    width: 100%;
}

li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}


li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    width: 16.6666%;
}

<ul class="bloco">
  <li class="item">
    1
  </li>
  <li class="item">
    2
  </li>
  <li class="item">
    3
  </li>
  <li class="item">
    4
  </li>	
  <li class="item">
    5
  </li>		
</ul>

10.02.2017 / 13:12

2

Flexbox

Using the flexbox property of css, you can better handle the fluidity you want between items. Analyze the difference of the class .content-wrap where I add a new parameter in the flex-flow property.

On the cross-browser issue of this property, it is already widespread in today's browsers. You will only need to analyze and align with your project if it will support some old browser that does not support flex-box, so you will need to analyze a fallback js to manipulate its elements and maintain the flexibility you want.

Taking this compatibility issue, everything is perfect in CSS.

I also advise you to read about this flex-box property. link

This guide is super intuitive too. link

I hope I have been able to help if you need help just to comment.

.box-container {
  background: #ccc;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
  max-width: 600px;
  padding: 0;
  margin: 0 auto;
}
.content-wrap {
 flex-flow: row wrap;
}
.box-item {
  background: tomato;
  border: 1px solid #fff;
  color: #fff;
  flex: 1 auto;
  list-style: none;
  padding: 20px;
  margin: 0;
  text-align: center;
}

<h2>Primeira lista</h2>
<ul class="box-container">
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 2</li>
  <li class="box-item">Item 3</li>
  <li class="box-item">Item 4</li>
  <li class="box-item">Item 5</li>
  <li class="box-item">Item 6</li>
</ul>
<h2>Segunda lista</h2>
<ul class="box-container">
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 2</li>
  <li class="box-item">Item 3</li>
</ul>

<h2>Terceira lista</h2>
<ul class="box-container">
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 2</li>
  <li class="box-item">Item 3</li>
  <li class="box-item">Item 4</li>
  <li class="box-item">Item 5</li>
  <li class="box-item">Item 6</li>
  <li class="box-item">Item 7</li>
  <li class="box-item">Item 8</li>
</ul>

<h2>Quarta lista com wrap</h2>
<ul class="box-container content-wrap">
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 2</li>
  <li class="box-item">Item 3</li>
  <li class="box-item">Item 4</li>
  <li class="box-item">Item 5</li>
  <li class="box-item">Item 6</li>
  <li class="box-item">Item 7</li>
  <li class="box-item">Item 8</li>
  <li class="box-item">Item 9</li>
  <li class="box-item">Item 10</li>
</ul>

<h2>Quinta lista com wrap</h2>
<ul class="box-container content-wrap">
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 2</li>
  <li class="box-item">Item 3</li>
  <li class="box-item">Item 4</li>
  <li class="box-item">Item 5</li>
  <li class="box-item">Item 6</li>
  <li class="box-item">Item 7</li>
  <li class="box-item">Item 8</li>
  <li class="box-item">Item 9</li>
  <li class="box-item">Item 1</li>
  <li class="box-item">Item 12</li>
  <li class="box-item">Item 13</li>
  <li class="box-item">Item 14</li>
  <li class="box-item">Item 15</li>
</ul>

13.02.2017 / 08:14

Page not printing results [closed] How to add HTML code inside an ol tag using JavaScript?

score -1 · Accepted Answer

I came up with the same result of the table but it was done in a list, like this:

ul {
	background:#CCC;
	padding:0;
	min-height: 70px;
	max-width:600px;
	padding: 4px;
	display: table-cell;
}

li {
	display: inline-block;
	border: solid 1px;
    margin-bottom:5px;
	min-width:145px;			
}

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>