Have my <li> display on the same row and other line of <li> on different row

Question

How do I put phone number and fax number after Tel: and Fax:? I tried with display=in-block and also reduced the width. But it keeps being on the same place. I want tel: xxxxx and fax: xxxxx to be on different row. not all in different row as it is now. So only 2 row.

Here is my fiddle: https://jsfiddle.net/Tokyo/yk072g7q/

like this? jsfiddle.net/yk072g7q/3 don't over-complicate your code, it makes it harder to maintain in the future — Abdul Ahmad
– Abdul Ahmad, Commented Oct 22, 2015 at 3:56
Tel: 000000 should be on first row and Fax: 00000 should be on the second row. I added <li> class for each of them to make Tel and 000 display in different column, and Fax and 000 also. — Kami
– Kami, Commented Oct 22, 2015 at 3:57
Yes, like that. But the numbers should have their own <li class> because they will have to start at the same line. How there starting line are not equal. — Kami
– Kami, Commented Oct 22, 2015 at 3:59
I had the code like yours before. Then I added to make the space equal. But that did not work out. Thats why I have different li class. Like an example table of this site: kriesi.at/support — Kami
– Kami, Commented Oct 22, 2015 at 4:01

Eric · Accepted Answer · 2015-10-22 05:06:34Z

Does this work for you?

ul { list-style-type: none; } .telefon { margin: 0px !important; width: 23px; } #ett { border: 5px solid #000; width: 220px; } .fax { display: list-item; margin: 0px !important; width: 23px; } .nummer { list-style-type: none; margin: 0px !important; width: 100px; } ul { padding: 0; } li { display:inline-block; padding: 0 .5em; }

<ul id="ett"> <li class="telefon">Tel:</li> <li class="nummer">03-3212-8787</li> </ul> <ul> <li class="telefon">Fax:</li> <li class="nummer">03-3212-8786</li> </ul>

Bear GRiZZLY Xi · Accepted Answer · 2015-10-22 08:02:25Z

Perhaps this decision will suit you. Good luck.

ul{ list-style:none; margin:0; padding:0 5px; } ul#ett { border: 5px solid #000; width:140px; } ul li { display:inline-block; } .telefon{ width: 23px; } .nummer{ padding:0 5px; }

<ul id="ett"><li class="telefon">Tel:</li> <li class="nummer">03-3212-8787</li></ul> <ul><li class="telefon">Fax:</li> <li class="nummer">03-3212-8786</li></ul>

Collectives™ on Stack Overflow

Have my <li> display on the same row and other line of <li> on different row

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related