Ul li alignments using float left and right

Question

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.

Not directly conecerning your problem, but still: Float representation is not precise in JavaScript: http://stackoverflow.com/questions/11695618/dealing-with-float-precision-in-javascript — elementzero23, Feb 10 '17 at 10:52
@elementzero23 float precision has absolutely nothing to do with the CSS float property, you're right. So why even mention it here? — Constantin Groß, Feb 10 '17 at 10:56
http://stackoverflow.com/questions/42153789/css-column-count-showing-something-mess/42154054#42154054 — Banzay, Feb 10 '17 at 11:11
@PrithvirajMitra : Good question. I couldn't think of a CSS only solution. Is jQuery fine ?? — Pugazh, Feb 10 '17 at 11:24

dippas · Answer 1 · 2017-02-10T11:20:08.007

3

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>

edited Feb 10 '17 at 11:20

answered Feb 10 '17 at 10:53

dippas

58,591
15
114
126

"I am trying to align the ul li depending on the float value." – Teshtek Feb 10 '17 at 10:58
You should also make the OP aware of the current browser support: http://caniuse.com/#feat=multicolumn – Constantin Groß Feb 10 '17 at 10:58
1

@Connum really? the vendor prefixes is not enough? – dippas Feb 10 '17 at 10:59
@dippas not if he/she has to support older versions of IE, which we don't know – Constantin Groß Feb 10 '17 at 11:00
Thank for your solution. The output is exactly the same as I wanted. But as I said each li can have float left or right and they should start from the top of the ul. – Prithviraj Mitra Feb 10 '17 at 11:03
why having float? – dippas Feb 10 '17 at 11:04
Thats the requirement...Sorry I can't change the html structure. – Prithviraj Mitra Feb 10 '17 at 11:06
LOL you are **NOT** changing html structure, just changing CSS – dippas Feb 10 '17 at 11:07
Sorry mate in your example you changed the html structure of what I first posted in my ques. – Prithviraj Mitra Feb 10 '17 at 11:10
Wait what?? your HTML structure is a simple `
` thats what I did. **inline styles aren't html structures**
– dippas Feb 10 '17 at 11:11
'My' html structure was this --
- Text 1
- Text 2
- Text 3
– Prithviraj Mitra Feb 10 '17 at 11:13
I'm not gonna argue with you, You need to Learn what means **HTML STRUCTURE** and **inline styles** – dippas Feb 10 '17 at 11:14
Well technically yes you are right It should be just html(structure + inline styles). In you eg you removed the inline styles. – Prithviraj Mitra Feb 10 '17 at 11:18
inline styles are a bad pratice, so I always remove it, plus I'm using `columns` CSS not `float` CSS, see updated answer btw – dippas Feb 10 '17 at 11:21

sol · Accepted Answer · 2017-02-10T11:42:09.910

1

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

edited Feb 10 '17 at 11:42

answered Feb 10 '17 at 11:05

sol

22,311
6
42
59

I have started liking this solution. Please give me some time to go through and understand. – Prithviraj Mitra Feb 10 '17 at 11:12
To be honest, I think it might be the only way to get what you want, especially if those inline styles are random. – sol Feb 10 '17 at 11:15
Good answer, but not perfect. This will fail if i add few more float right items! – Pugazh Feb 10 '17 at 11:18
Yes the inline styles are random. That's why this is a complex one. – Prithviraj Mitra Feb 10 '17 at 11:19
@Pugazh I tried adding few more and seems to be alright. – Prithviraj Mitra Feb 10 '17 at 11:19
@PrithvirajMitra: Check this https://jsfiddle.net/t72pohL7/3/ and this https://jsfiddle.net/t72pohL7/5/ – Pugazh Feb 10 '17 at 11:21
@PrithvirajMitra: Are you fine with a jQuery solution ? – Pugazh Feb 10 '17 at 11:25
@Pugazh Well spotted.. I'm not sure I can find a solution for this – sol Feb 10 '17 at 11:29
@ovokuro I need to think about changing the html structure. – Prithviraj Mitra Feb 10 '17 at 11:31
@ovokuro : Your's is the best answer here, but it might fail in certain scenario's. – Pugazh Feb 10 '17 at 11:35
Got a solution. I can remake the html structure in such a way where the li's with float left will list first and then the rest li's with float right will be listed. :). Obviously I will be using css class instead inline styles. – Prithviraj Mitra Feb 10 '17 at 11:40
Answer accepted. Thanks @ovokuro for this brilliant solution. – Prithviraj Mitra Feb 10 '17 at 11:40

Alexander Nikolaenko · Answer 3 · 2017-02-10T11:41:23.283

1

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%;
}

edited Feb 10 '17 at 11:41

answered Feb 10 '17 at 11:13

Alexander Nikolaenko

167
10

score -1 · Answer 4 · answered Feb 10 '17 at 10:59

-1

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>

answered Feb 10 '17 at 10:59

Sing

3,942
3
29
40

why You add
Text 3

Ivin Raj

Feb 10 '17 at 11:01

@IvinRaj As I said, OP could `rearrange the elements` and use clear both. – Sing Feb 10 '17 at 11:06

@AndyChen Thanks for your effort. – Prithviraj Mitra Feb 10 '17 at 11:43

Ul li alignments using float left and right

4 Answers4