Arranging and structuring lists using HTML/CSS

Question

Arranging and structuring lists using HTML/CSS

Looking for some help with organizing a list where each item needs to be divided into two sections, and the first section should have a fixed width. Any suggestions on how to code this?

I initially attempted using definition lists:

    <dl>
      <dt style="width: 2em;">foo</dt><dd>bar</dd>
    ...

    </dl>

... as well as unordered lists with spans:

    <ul>
      <li><span style="width: 2em;">foo<span>bar</li>
    ...

    </ul>

However, neither of these methods seemed to work. Are there any established ways or best practices for achieving this layout?

html css width html-lists

Answer 1

Answer №1

As Alan mentioned, simply using a div will not achieve the desired outcome. You can try the following approach instead:

<ul>
  <li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>

(Consider using a class instead of repeating the style attribute for each list item)

Answer 2

As Alan mentioned, simply using a div will not achieve the desired outcome. You can try the following approach instead:

<ul>
  <li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>

(Consider using a class instead of repeating the style attribute for each list item)

Answer 3

Answer №2

The approach I devised may not be considered conventional (mainly because I have doubts about the existence of a standardized method for its implementation), but it definitely produces the desired outcome:

    <style type="text/css" media="screen">

        #container
            {width: 60%;
            margin: 0 auto;
            }

        ol,
        ul  {border: 1px solid #ddd;
            width: 80%;
            padding: 1em 0;
            }

        ol li,
        ul li   {background-color: #ddd;
            margin-left: 15%;
            }

        ol li span.list-head,
        ul li span.list-head
            {background-color: #ffd;
            float: left;
            display: inline-block;
            width: 5em;
            }

        dl  {border: 1px solid #ddd;
            line-height: 1.2em;
            padding: 1em 0 0 0;
            }

        dl dt   {background-color: #ffd;
            display: inline-block;
            margin: 0;
            width: 8%;
            }

        dl dd   {background-color: #fcc;
            display: block;
            margin: 0;
            width: 85%;
            margin-left: 10%;
            position: relative;
            top: -1em;
            }       

    </style>
...
    <div id="container">

        <ol>

            <li><span class="list-head">Apple:</span> pie.</li>

            <li><span class="list-head">Banana:</span> bread.</li>

            <li><span class="list-head">Carrot:</span> cake.</li>

        </ol>

        <ul>

            <li><span class="list-head">Date:</span> pudding.</li>

            <li><span class="list-head">Eggplant:</span> parmesan.</li>

            <li><span class="list-head">Fig:</span> jam.</li>

        </ul>

        <dl>

            <dt>Grape:</dt>
            <dd>nuts.</dd>

            <dt>Honeydew:</dt>
            <dd>melon.</dd>

            <dt>Ice cream:</dt>
            <dd>sundae.</dd>

        </dl>

    </div>

To see a live demonstration, visit: http://www.janesmith.com/so/lists.html.

Answer 4

The approach I devised may not be considered conventional (mainly because I have doubts about the existence of a standardized method for its implementation), but it definitely produces the desired outcome:

    <style type="text/css" media="screen">

        #container
            {width: 60%;
            margin: 0 auto;
            }

        ol,
        ul  {border: 1px solid #ddd;
            width: 80%;
            padding: 1em 0;
            }

        ol li,
        ul li   {background-color: #ddd;
            margin-left: 15%;
            }

        ol li span.list-head,
        ul li span.list-head
            {background-color: #ffd;
            float: left;
            display: inline-block;
            width: 5em;
            }

        dl  {border: 1px solid #ddd;
            line-height: 1.2em;
            padding: 1em 0 0 0;
            }

        dl dt   {background-color: #ffd;
            display: inline-block;
            margin: 0;
            width: 8%;
            }

        dl dd   {background-color: #fcc;
            display: block;
            margin: 0;
            width: 85%;
            margin-left: 10%;
            position: relative;
            top: -1em;
            }       

    </style>
...
    <div id="container">

        <ol>

            <li><span class="list-head">Apple:</span> pie.</li>

            <li><span class="list-head">Banana:</span> bread.</li>

            <li><span class="list-head">Carrot:</span> cake.</li>

        </ol>

        <ul>

            <li><span class="list-head">Date:</span> pudding.</li>

            <li><span class="list-head">Eggplant:</span> parmesan.</li>

            <li><span class="list-head">Fig:</span> jam.</li>

        </ul>

        <dl>

            <dt>Grape:</dt>
            <dd>nuts.</dd>

            <dt>Honeydew:</dt>
            <dd>melon.</dd>

            <dt>Ice cream:</dt>
            <dd>sundae.</dd>

        </dl>

    </div>

To see a live demonstration, visit: http://www.janesmith.com/so/lists.html.

Answer 5

Answer №3

The style attribute 'width' is not valid for <span> elements since they are displayed inline. Consider replacing the <span> with a block-level element, such as <div> or <p>.

Answer 6

The style attribute 'width' is not valid for <span> elements since they are displayed inline. Consider replacing the <span> with a block-level element, such as <div> or <p>.

Answer 7

Answer №4

To achieve the desired layout, utilize a dl element and apply float to the dt tags positioned to the left.

<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>

<dl>
     <dt>foo<dt>
     <dd>bar</dd>
     <dt>foo1<dt>
     <dd>bar1</dd>
     <dt>foo12345<dt>
     <dd>bar</dd>
 </dl>

Answer 8

To achieve the desired layout, utilize a dl element and apply float to the dt tags positioned to the left.

<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>

<dl>
     <dt>foo<dt>
     <dd>bar</dd>
     <dt>foo1<dt>
     <dd>bar1</dd>
     <dt>foo12345<dt>
     <dd>bar</dd>
 </dl>

Answer 9

Answer №5

Consider using a label for the initial section or an inline div instead

Answer 10

Consider using a label for the initial section or an inline div instead

Answer 11

Answer №6

Can I just confirm if this is intended for displaying tabular data? Many people have been taught to avoid using HTML tables, but they can actually be perfect for presenting data in a table format. It's not uncommon to see developers trying to replicate the <table> tag with <div>s and CSS.

But if that's not your intention, then please continue with what you were doing. :-)

Answer 12

Can I just confirm if this is intended for displaying tabular data? Many people have been taught to avoid using HTML tables, but they can actually be perfect for presenting data in a table format. It's not uncommon to see developers trying to replicate the <table> tag with <div>s and CSS.

But if that's not your intention, then please continue with what you were doing. :-)

Arranging and structuring lists using HTML/CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Submitting data through AJAX when clicking a button

Search Result Causing Navbar to Break in Bootstrap Framework

Having trouble using the search feature on ngx-mat-select-search for typing?

Bootstrap does not toggle the menu

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Prevent jQuery from scrolling once the fixed image reaches the bottom of the page

How to strategically break Bootstrap 5 button groups for different resolutions?

What is the most effective way to navigate to a different web page without relying on Javascript

Override CSS properties / prevent inheritance

Utilize JavaScript to assign a button with identical functionality as another button

Utilizing pjax to open internal pages in a new tab

Styling a Form Submission with CSS

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

Select the small image to reveal the larger overlay image

Ensuring the custom element receives focus only when the necessary hidden field remains unfilled

Perform an SQL function to select and update data

Adjusting the iframe for a side navigation with multiple dropdown options

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

Why does the selected attribute not function properly in <select><option> when used with ngModel?

Investigating the issue of jQuery autocomplete combobox line items breaking in all versions of Internet Explorer. Let's dive into this matter