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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.