{"id":338,"date":"2012-05-04T08:29:43","date_gmt":"2012-05-04T08:29:43","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=338"},"modified":"2022-02-17T07:14:04","modified_gmt":"2022-02-17T07:14:04","slug":"lists","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/lists-css\/lists","title":{"rendered":".Lists"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Targetting Specific List Elements <\/h4>\n\n\n\n<p>Hide the li class &#8220;comments&#8221; in ul &#8220;meta-single&#8221;: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul.meta-single li.comments { display: none; }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Getting rid of list dots <\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.page_item ul li { \/* Remove the dots *\/ \n  list-style-image: none;\n  list-style-position: outside;\n  list-style-type: none; \n} <\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Using An Image As The List Bullet Point <\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ul {\n\tlist-style-type: none;\n\tpadding: 0px;\n\tmargin: 0px;\n} \nli {\n\tbackground-image: url(..\/images\/list_bullet_blue.png);\n\tbackground-repeat: no-repeat;\n\tbackground-position: 0px 4px;\n\tpadding-left: 14px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2 Column List <\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ul.my_style {\n  width:660px;\n  overflow:hidden;\n}\nul.my_style li {\n\twidth: 50%;\t\t\t\t\/* 2 col *\/\n\theight: 30px;\n\tmargin: 0px;\n\tfloat: left;\n\tdisplay: inline;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">List items in a horizontal line and with an icon each<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ul.my_class_name {\n  list-style-type: none;\n  margin: 2px 0px 6px 0px;\n\tpadding: 0px;\n  display: inline-block;\n}\n\nul.my_class_name li {\n\tbackground-image: url(..\/theme-child\/images\/list_selection_tick.png);\n\tbackground-repeat: no-repeat;\n  background-size: 20px 18px;\n\tbackground-position: 0px 0px;\n  margin: 0px 12px 4px 0px;\n\tpadding: 0px 0px 0px 18px;\n  line-height: 18px;\n  color: #008989;\n  float: left;\n  white-space: nowrap;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Targetting Specific List Elements Hide the li class &#8220;comments&#8221; in ul &#8220;meta-single&#8221;: Getting rid of list dots Using An Image As The List Bullet Point 2 Column List List items in a horizontal line and with an icon each<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[194],"tags":[],"class_list":["post-338","post","type-post","status-publish","format-standard","hentry","category-lists-css"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":11,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"predecessor-version":[{"id":2341,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/338\/revisions\/2341"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}