CODEWITHSUNDEEP
htmlcss
Egor Zaykov
Egor Zaykov

Reputation: 17

Several ul inline-block

I'm wanted to make a few lists like :

li    li    li 
li    li    li
            li

ul {
  display: inline-block;
}

I used this markup, but result was:

            li 
li    li    li
li    li    li

So, I tried use this:

ul {
  display: inline-block;
  vertical-align: top;
}

but I received:

li
li

li
li

li
li
li

What should I do to receive wanted result?

Upvotes: 0

Views: 80

Answers (6)

Ferran Buireu
Ferran Buireu

Reputation: 29315

Check this:

.list{
width:300px; //or any desired size
padding:0;
display:flex;
flex-flow:row wrap;
justify-content: flex-end;
list-style:none;
}
.list li{
  width:33%;
}
  
<ul class="list">
<li>li</li><li>li</li><li>li</li>
<li>li</li><li>li</li><li>li</li>
<li>li</li>
</ul>

I used a simply flexbox. The key is justify-content: flex-end; which align the last <li> at the end of the <ul>. I think it's one of the most clean, clever and flexible solution, without adding unintentioned <ul> and without much and confusing CSS.

Upvotes: 1

user9255534
user9255534

Reputation:

It's working.

ul {
  display: inline-block;
  vertical-align: top;
}

ul li {
  color: blue;
  font-weight: bold;
  font-family: sans-serif;
}
<ul class="ul1">
  <li>li</li>
  <li>li</li>
</ul>
<ul class="ul2">
  <li>li</li>
  <li>li</li>
</ul>
<ul class="ul3">
  <li>li</li>
  <li>li</li>
  <li>li</li>
</ul>

Upvotes: 0

pixlboy
pixlboy

Reputation: 1502

Just float your ul elements to the left.

ul {
  float: left;
}
<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
</ul>
<ul>
  <li>y</li>
  <li>t</li>
  <li>r</li>
</ul>

Upvotes: 0

Shivani
Shivani

Reputation: 347

Please try with below code. Wrap 'ul' inside a 'div' and display it with flex. Here is the link https://jsfiddle.net/gkkLwmLk/

<style>
div {
    display: flex;
}
ul {
    display: inline-block;
}
</style>
<body>
<div>
    <ul>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</div>
</body>

Upvotes: 0

Sarvan Kumar
Sarvan Kumar

Reputation: 934

Use this fiddle

ul {
  display: inline-block;
  list-style:none;
  vertical-align:top;
}

Upvotes: 1

Sam Willis
Sam Willis

Reputation: 4211

You just need to set your ul to be inline-block like so:

ul {
  display: inline-block;
  vertical-align: top;
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>y</li>
  <li>t</li>
  <li>r</li>
</ul>

It's hard to give you any more advice without more information on your markup.

Upvotes: 0

Related Questions