text - HTML listing product properties -
I would like to list product properties like the following properties:
property 1: items Property 2: Item
Property 3: Item
Property 4432: Item
Note that the "item" starts like an indent.
I know that it can be accomplished by using tables and divs, though I think a novel can be a little bit me, does anyone tell me how it usually applies ?
Thanks in advance!
A definition list would be appropriate here:
& lt; Dl & gt; & Lt; DT & gt; Property & lt; / Dt & gt; & Lt; Dd & gt; Related items & lt; / Dd> & Lt; Dt & gt; Property 2 & lt; / Dt & gt; & Lt; Dd & gt; Second related item & lt; / Dd> & Lt; / DL & gt; To display that list, as you show in your question, use the following CSS:
dl dt {float: left ; Margins: 0 10px 0 0; } DL DD + DT, DL DD + DD {Clear: Left} DL DD + DD {Float: None} See JSfield here:
Alternatively A simple noodle list creates cleaner code, though a little less semantic:
& lt; Ul & gt; & Lt; Li & gt; Property & lt; Span & gt; Related items & lt; / Span & gt; & Lt; / Li & gt; & Lt; Li & gt; Property 2 & lt; Span & gt; Related items & lt; / Span & gt; & Lt; / Li & gt; & Lt; / Ul & gt; Span tags allow you to add CSS to apply indentation. If more than one space indentation is not required, remove the span tags.
Comments
Post a Comment