CODEWITHSUNDEEP
htmlcss
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11852

Ul li alignments using float left and right

I am trying to align the ul li depending on the float value.

So if the float is left then it will align left else right. But the issue is that when a li gets float right then it aligns to the right but not at the top.

Html code--

<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:left;">Text 2</li>
  <li style="float:right;">Text 3</li>
</ul>

Demo -- https://jsfiddle.net/squidraj/t2qmfkya/

Now they are all in one line but I would like to display it in the following way

Text 1    Text 3
Text 2

I have no clue if this is at all possible by the html format I have.

Any help is highly appreciated.

Upvotes: 1

Views: 2061

Answers (4)

sol
sol

Reputation: 22959

This isn't the prettiest, but might help you...

You can target the elements with a particular inline style.

jsfiddle

ul li[style="float:left;"] {
  clear: left;
  margin-right: 20px;
}

ul li[style="float:right;"] {
  float: none !important;
}


ul {
  width: 180px;
  background: red;
  display: block;
  float: left;
  padding: 1rem;
  list-style: none;
}
ul li[style="float:left;"] {
  clear: left;
  margin-right: 20px;
}
ul li[style="float:right;"] {
  float: none !important;
}
<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:left;">Text 2</li>
  <li style="float:right;">Text 3</li>
  <li style="float:right;">Text 4</li>
  <li style="float:left;">Text 5</li>
</ul>

Updated

ul li[style="float:right;"] {
  float: none !important;
  padding-left: 100px;
}

This ensures that all float:right elements line up.

fiddle

Upvotes: 1

Alexander Nikolaenko
Alexander Nikolaenko

Reputation: 167

Try to do it in this way https://jsfiddle.net/t2qmfkya/5/

<ul>
  <li class="right-item" style="float:right;">Text 3</li>
  <li class="right-item" style="float:right;">Text 4</li>
  <li>Text 1</li>
  <li>Text 2</li>  
</ul>


ul {
  width: 180px;
  background: red;
  padding: 1rem;
  list-style: none;
  overflow: hidden;
}

ul li {
  overflow: hidden;
}
.right-item{
  width: 51%;
}

Upvotes: 1

dippas
dippas

Reputation: 60603

you can use CSS3 columns

ul {
  columns: 2;
  -moz-columns: 2;
  -webkit-columns: 2;
}
<ul>
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
</ul>

UPDATE

More random lis

ul {
  columns: 5;
  -moz-columns: 5;
  -webkit-columns: 5;
}
<ul>
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
  <li>Text 4</li>
  <li>Text 5</li>
  <li>Text 6</li>
  <li>Text 7</li>
  <li>Text 8</li>
  <li>Text 9</li>
  <li>Text 10</li>
</ul>

Upvotes: 3

Sing
Sing

Reputation: 4052

Rearrange element and use clear both can handle this :

ul {
  width: 180px;
  background: red;
  display: block;
  float: left;
  padding: 1rem;
  list-style: none;
}

ul li {}
<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:right;">Text 3</li>
  <li style="clear:both;">Text 2</li>
</ul>

Upvotes: -1

Related Questions