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

Popular posts from this blog

c# - ListView onScroll event -

PHP - get image from byte array -

Linux Terminal Problem with Non-Canonical Terminal I/O app -