HTML with icon on left and right side

Question

I want to create an un-order list in html. Each of list item, there will be an icon on left side and an icon on right side. The text is among 2 icons and should auto occupy available screen width. In the case of long text, it will be ellipsis. The list item should like this:

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + short text             + +icon+
++++++ ++++++++++++++++++++++++++ ++++++

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + long text long text ...+ +icon+
++++++ ++++++++++++++++++++++++++ ++++++

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + short text             + +icon+
++++++ ++++++++++++++++++++++++++ ++++++

I tried many ways to create the list but didn't success. Please help! Any solution or recommends are welcome.

UPDATE: I need the icons on separated tags, such as div or img Thanks in advance.

@EmmadKareem I tried to use `display:table` before, but when I ran the page on iOS webkit, the first column always occupy a half of available space. Do you have any example of this? — Nguyen Minh Binh, May 04 '13 at 12:58
I don't know about iOS but maybe this is related:http://stackoverflow.com/questions/3061156/how-to-display-html-like-table-data-on-iphone — NoChance, May 04 '13 at 13:28

score 2 · Answer 1 · answered May 04 '13 at 10:11

2

Just combine some CSS tricks:

ul {
    margin:0;
    padding:0;
}
li {
    background:url(http://www.caloriedagboek.nl/_lib/img/icons/icon_help.gif) right center no-repeat;
    margin:0;
    overflow:hidden;
    padding:0 24px 0 0;
    text-overflow:ellipsis;
    white-space:nowrap;
}
li:before {
    content:url(http://www.caloriedagboek.nl/_lib/img/icons/icon_help.gif);
    margin:0 0.5em;
}

Sample fiddle.

answered May 04 '13 at 10:11

Niels Keurentjes

41,402
9
98
136

Great help. But there is any way to separate the icons into independent tags? such as `img` – Nguyen Minh Binh May 04 '13 at 10:18
As discussed below - you could for the first icon (just move it inline and remove the `:before` declaration). For the second one it's not possible since the ellipsis would cut it off. You could however simply do it from HTML by setting `style="background-image:url(...)"` on the `
` element for the second icon. There are more complex solutions that would allow putting both in `` tags, those would severely complicate matters and require positioning hacks though.

Niels Keurentjes

May 04 '13 at 10:25

This means that we can add separated `img` at right side if the text isn't ellipsis any more? – Nguyen Minh Binh May 04 '13 at 10:34

score 2 · Accepted Answer · edited Jul 31 '15 at 18:28

2

You can use floats: Demo 1

And you can use position absolute: Demo 2

Ignore if it's not what you are after.

edited Jul 31 '15 at 18:28

RevanthKrishnaKumar V.

1,855
1
21
34

answered May 04 '13 at 10:12

Adaz

1,627
12
14

Nice example, but the text is wrapping around the icon, right? I want the text and icons are separated columns. – Nguyen Minh Binh May 04 '13 at 10:33
Hi Adaz. I saw that your solution worked when ran on JSBin. but, when I try on google chrome or iOS webkit, It didn't. – Nguyen Minh Binh May 04 '13 at 12:53
Let's talk your code through on the chat http://chat.stackoverflow.com/rooms/29416/html-with-icon-on-left-and-right-side – Adaz May 04 '13 at 13:20

score 1 · Answer 3 · edited Jul 31 '15 at 19:16

1

you can take advantage of calc

maybe something like this.

Sample Fiddle

edited Jul 31 '15 at 19:16

RevanthKrishnaKumar V.

1,855
1
21
34

answered May 04 '13 at 10:10

btevfik

3,391
3
27
39

what is it that it is not addressing? – btevfik May 04 '13 at 10:15
In my Chrome (beta channel) it runs outside the right screen border. Admittedly I only saw just now that that was the reason I didn't see the second icon hehe, fixed my comment. – Niels Keurentjes May 04 '13 at 10:16
@Niels add `box-sizing:border-box` to `ul` – btevfik May 04 '13 at 10:17
Still you didn't handle the ellipsis requirement, and not sure you can easily do it when the images are part of the markup since it'll clip the right image first. Another challenge? ;) – Niels Keurentjes May 04 '13 at 10:19
2

@Niels i didnt see the ellipsis requirement. you win. :) – btevfik May 04 '13 at 10:21

HTML with icon on left and right side

3 Answers3