带有左右图标的HTML

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.

Answer 1

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 .

Answer 2

You can use floats: Demo 1

And you can use position absolute: Demo 2

Ignore if it's not what you are after.

Answer 3

you can take advantage of calc

maybe something like this.

Sample Fiddle