Ul list with independent dynamic width of items

Asked

Viewed 132 times

-1

I have a list with several blocks, I would like the width of UL to be dynamic, if I delete a <li> the size of the list track without breaking the alignments, it needs to serve for 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

  • There is a maximum of blocks?

  • There can be no multiple blocks, but there is a maximum width of UL, maximum 800 pixels, if you have more blocks shows scroll.

  • It can be 600px, only it must have a maximum size to not leave the screen with many items.

  • What you asked now didn’t make sense, if I have 1000 items all will be 0.1% wide and will not have scroll, or you have one min-width for the items?

  • Some considerations: - ul can have a maximum of 600px and has a scroll bar - Blocks only duplicate within UL

  • Samuel, some time ago I made a similar implementation, as you can see in the following Jsfiddle, sure I used a lot of JS.

  • Cool ball show Tobias, here it’s all right, thanks abs!

Show 2 more comments

3 answers

3

This way it works by decreasing the 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>

2

Flexbox

Using the css flexbox property you can better manipulate the fluidity issue you want between items. Analyze the class difference. content-wrap where I add a new parameter to the flex-flow property.

On the cross-browser issue of this property, it is already widespread in current browsers. It 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.

Aside from this compatibility issue, all Perfect in CSS.

I also recommend reading about this flex-box property. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

This guide is super intuitive too. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I hope I’ve been able to help, so if you need help just 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>

-1


I arrived at the same result of the table but done in a list, was 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>

  • It is wrong and it seems a lot that you are filling with answers in your question.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.