Two-column dropdowns without the use of tables

I am looking to create a drop-down menu with the following structure:

       |  Heading
----------------
action |  Item
action |  Item
action |  Item
action |  Item

The action could represent "Change" and Item could be something like "Users". To maintain semantic integrity, it would make sense to use the following HTML:

<h3>Heading</h3>
<dl>
  <dt>action</dt>
    <dd>Item</dd>
  <dt>action</dt>
    <dd>Item</dd>
</dl>

However, the challenge lies in aligning the action and Item without fixed heights or widths.

While using a <table/> may seem like an obvious solution, it is not ideal for non-tabular data. Is there a way to achieve this design without resorting to an HTML table? Your insights are greatly appreciated.

htmlcss

Answer №1

By applying the style float:left to both dt and dd, you can align them in this manner:

dt {
  float:left;   
}

Check out an example on this jsFiddle link

Answer №2

There are moments when resorting to a <table> is necessary, unless an alternative is proposed

Answer №3

Alright, here's the plan:

<ul>

<li>
    <span class="action">"Enter Action Here"</>
    <span class="item>"Enter Item Here"</>
</li>
<li>
    <span class="action">"Enter Action Here"</>
    <span class="item>"Enter Item Here"</>
</li>
<li>
    <span class="action">"Enter Action Here"</>
    <span class="item>"Enter Item Here"</>
</li>

</ul>

Afterwards, you can use CSS to arrange them:

.action {float:left;}
.item {float:right;}

I tested it on Fiddle and it turned out great!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looping through elements with jQuery's `each` method within another `

When using div containers in my code, I wanted to loop over them and then iterate through the items within each container. Instead of $('.stackContainer .stackItem').each(, I was looking for a solution like this: // setup stacks $('.stackC ...

javascriptjqueryhtml

Managing HTML5 Video in a slider

I've designed a unique video slider that cycles through 4 videos. Each video has a custom play button and additional overlay content. Once the video starts playing, the overlay content and play button fade out to reveal the default video controls. The ...

javascriptjqueryhtmlvideohtml5-video

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss

Twofold Arrow Styling in CSS

Can someone help me achieve this design: https://i.stack.imgur.com/eBQ1a.png I am attempting to create a double arrow using just one class. I have tried various methods, but nothing seems to be working for me. If anyone has any suggestions or can point ...

htmlcsssvg

Is there a way to modify the background shade of an HTML meter element?

Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...

htmlcss

HTML - Transforming JSON data into a table

I'm having trouble converting JSON data into a table format. Although everything seems to be in order, I am unable to view the values on my table. Here is the code I am using to convert JSON to a table: $(function() { var my_data = &ap ...

javascriptjqueryhtmljsonajax

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

Having trouble with my intricate-box and grid layout - the images are all overlapping!

Could you please take a look at the image below and tell me what I might be doing incorrectly? When the page initially loads, pictures appear like this. However, if I refresh the page, the issue is resolved. https://i.sstatic.net/hIyA4.jpg If I remove th ...

htmlcssbootstrap-4fancybox-3

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Despite my efforts to implement ngmodel binding with matdatepicker, I am still encountering issues, even after reviewing multiple other posts on the topic. Here is a snippet of my HTML: <mat-form-field> <mat-label>Start Date</mat-label ...

htmlangulartypescriptangular-material

Having trouble bringing in SVG file into my React project

I am currently using React version 15.4.1 and I have tried implementing a solution from this link. However, instead of the component being rendered, I only see a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg This is how ...

htmlreactjssvgecmascript-6loader

Encountering the error message "AngularJS error: $(...).modal is not a function" after updating from Bootstrap 3.3.6 to version 4.0

Since updating the bootstrap version in my application from 3.3.6 to 4, I've been encountering an error stating that $(...).modal is not a function. This was previously working fine before the update. angular.js:14700 TypeError: $(...).modal is n ...

jquerycssangularjstwitter-bootstrapmodel-view-controller

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascriptjqueryhtmlcss

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

htmljquerydomweb-applicationsrendering

What is the best way to obtain a date in the format of yyyy_mm_dd from a datepicker tool?

I am working with 2 datepickers that have similar structures, but different names. The first one has the id "fecha_1_1" and the second one has the id "fecha_1_2". <div class="col-sm-3"> <p>Desde</p> <div class="f ...

javascripthtmlajaxtwitter-bootstrap-3datepicker

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

javascriptjqueryhtmlcss

What is the best way to retrieve a particular div element from a webpage?

I'm having trouble retrieving a specific div element (specifically with the attribute id="vung_doc") from a website. Instead of getting just that element, I seem to be getting almost every element on the page. Any ideas on what could be causing this i ...

phphtmlxpathdomdocumentdomxpath

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

javascriptcssvue.jsvuejs2vue-component