image - make a table from ul elements without the top and the sides borders in CSS -
value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^
value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^
value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^
i have ul
tag inside them there li
tags text , image. want them table above. inside each block there image , text next each other. table without borders top & left & right ((the ||
, ^
line of table))
<ul> <li>value 1</li> <li>value 2</li> <li>value 3</li> <li>value 4</li> <li>value 5</li> <li>value 6</li> </ul>
inside each li
tags there be:
<li> <img src="test.jpg"/> <p>some text</p> </li>
nesting set of ul
s each li
.
<ul class="top-level"> <li class="border-bottom"> <ul class="horizontal"> <li class="border-right"> <p>some text</p> </li> <li> <p>some text</p> </li> </ul> </li> <li class="border-bottom"> <ul class="horizontal"> <li class="border-right"> <p>some text</p> </li> <li> <p>some text</p> </li> </ul> </li> <li class="border-bottom"> <ul class="horizontal"> <li class="border-right"> <p>some text</p> </li> <li> <p>some text</p> </li> </ul> </li> </ul>
and use css:
.horizontal li { list-style-type: none; display: inline-block; padding-right: 5px; } .top-level { list-style-type: none; } .border-right { border-right: 1px solid black; } .border-bottom { border-bottom: 1px solid black; }
you can modify borders whatever styles want.
Comments
Post a Comment