I am not good with CSS. I am not sure how to align checkboxes in columns with their child checkboxes underneath as a hierarchical representation. Example, I have countries and their respective states to be shown in a hierarchy but in columns as shown in the image below.
I am not sure how to align this using code. I get hierarchical data from the service but could not align in the below format.
I tried using margins, float, but cannot format the layout properly.
please find the HTML markup below:
<div id="CountryList" style="display: block; width: 100%;">
<div style="display: inline;">
<div style="display: block;">
<input type="checkbox" class="country-parent" />United States of America
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />New York
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Iowa
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Texas
</div>
</div>
<div style="display: inline;">
<div style="display: block;">
<input type="checkbox" class="country-parent" />Australia
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />New South Wales
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Queensland
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Victoria
</div>
</div>
<div style="display: inline;">
<div style="display: block;">
<input type="checkbox" class="country-parent" />India
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Andhra Pradesh
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Tamilnadu
</div>
<div style="display: block;">
<input type="checkbox" class="country-child" />Karnataka
</div>
</div>
Any help in this regard is highly appreciated.
