css - Style a cascade list into table -
Just asking how to style a waterfall list is like this:
& Lt; Ol & gt; & Lt; Li & gt; & Lt; Ol & gt; & Lt; Li & gt; Call 1 line1 & lt; / Li & gt; & Lt; Li & gt; Column 2 line 1 & lt; / Li & gt; & Lt; / Ol & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Ol & gt; & Lt; Li & gt; Column 1 line2 & lt; / Li & gt; & Lt; Li & gt; Call 2 line 2 & lt; / Li & gt; & Lt; / Ol & gt; & Lt; / Li & gt; & Lt; / Ol & gt;
In a table like this
------------------------ ------------------------------ | Column 1 line1 | Column 2 line 1 | Column 1 row2 | Call 2 line 2 -------------------------------------------------- ----
Where each line is a horizontal list of the same width
I am using it to achieve, but it can only get close
--------------------------------------- - -------------- | Column 1 line1 | Column 2 line 1 | Column 1 row2 | Call 2 line 2 -------------------------------------------------- ----
I can not make each cell the same width Here is my CSS
ol.question_list {list-style: decimal; Width: 100%; } Ol.question_list li {Clear: Both; Width: 100%; } Ul.choice_list {List-style: None; Padding: 0; Margin: 0 auto; Width: 100%; } Ul.choice_list li {display: inline; List-style-type: none; }
And here is my sample HTML
& lt; Ol class = "question_list" & gt; & Lt; Li & gt; & Lt; Ul class = "choice_list" & gt; & Lt; Li & gt; ABC & lt; / Li & gt; & Lt; Li & gt; Defghi & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Ul class = "choice_list" & gt; & Lt; Li & gt; Abc12345 & lt; / Li & gt; & Lt; Li & gt; Defghi12345 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ol & gt;
Any ideas will be highly appreciated.
I have got the solution, but before I thank you for reacting in this thread. The solution is as follows:
ol.row_list {list-style: decimals; Padding: 0; Margin: 0 auto; Width: 100%; } Ol.row_list li: after {content: ""; Display area; Line-height: 1px; Font-size: 1px; Clean both; } Ul.col_list {List-style: None; Padding: 0; Margin: 0 auto; Width: 100%; } Ul.col_list li {display: block; Swim left; Width: 8%; Margin: 0; Padding: 0; } Div {display: table; }
and HTML looks like this
& lt; Div & gt; & Lt; Ol class = "row_list" & gt; & Lt; Li & gt; & Lt; Ul class = "col_list" & gt; & Lt; Li & gt; ABC & lt; / Li & gt; & Lt; Li & gt; 12345 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Ul class = "col_list" & gt; & Lt; Li & gt; Abc12345 & lt; / Li & gt; & Lt; Li & gt; 1234567890 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ol & gt; & Lt; / Div & gt;
.question_list {min-height: 10px; // clear float} .question_list li {display: block; Swim left; Width: 50%; }
Do you try it?
Comments
Post a Comment