example here: http://jsfiddle.net/R7GUZ/3/
I'm having a heck of a time getting list-style
to work in webkit for a parent OL styled with
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
How do I format an ordered list into columns with css3 and still maintain the list-style
styling?
<ol class="text-col2">
<li>
<strong>Can we call you?</strong>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
</li>
<li>
<strong>Can we call you?</strong>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
</li>
</ol>
We can display a list in n columns format in two ways: Using Float in list. Using column-count in list.
The list-style property can be applied to <ol>, <ul> or <li> tags. The list-style applies to elements with display: list-item. When using the list-style property, you can provide one or all of the values (list-style-type, list-style-position and list-style-image values) and they can be provided in any order.
Which of the following can't be the value of list-style-type? Explanation: list-style-property is used for defining the style of list item marker. Its value can be square, circle, disc or none. For setting list item marker to be bullet we use the value disc.
Adding 20px margin-left to the li
s did the trick
ol li {
list-style: decimal;
margin-left: 20px
}
It seems the numbers are actually hidden. This can be resolved by using the following property:
OL {
list-style-position: inside;
}
Note if you have reset the margin
and padding
properties (like in your example on jsFiddle where CSS have been normalized), you will have to set them to the right values so columns are correctly formatted.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With