List of descriptions: One pair per line

Question

List of descriptions: One pair per line

In need of a solution to align the term and description in a description list on the same line.

The current code I have works, but it doesn't look very professional. It's time to update it with a more modern approach using flexbox. But how can I implement flexbox for this?

dt, dd { float: left; }
dt { clear: both; font-weight: bold; }
dd { margin-inline-start: 1em; } /* Ideally avoid changing browser defaults */

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

html css flexbox

Answer 1

Answer №1

Utilizing display: flex for dl enables you to leverage CSS flexbox. For a more polished look, consider incorporating color, padding, and various text formatting styles.

dl {
  display: flex;
  flex-wrap: wrap;
  /*adjust width, font-family, and margin based on your needs*/
  max-width: 400px;
  margin: 0 auto;
  font-family: helvetica, arial, sans-serif
}

dt,
dd {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
}

dt {
  font-weight: 700;
  background: #ddd;
  border: 1px solid #ccc;
}

dd {
  background: #f2f2f2;
  border: 1px solid #ccc;
}

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Answer 2

Utilizing display: flex for dl enables you to leverage CSS flexbox. For a more polished look, consider incorporating color, padding, and various text formatting styles.

dl {
  display: flex;
  flex-wrap: wrap;
  /*adjust width, font-family, and margin based on your needs*/
  max-width: 400px;
  margin: 0 auto;
  font-family: helvetica, arial, sans-serif
}

dt,
dd {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
}

dt {
  font-weight: 700;
  background: #ddd;
  border: 1px solid #ccc;
}

dd {
  background: #f2f2f2;
  border: 1px solid #ccc;
}

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Answer 3

Answer №2

Simply put, I would use the display: flex; property on the parent dl element to control its child elements and style them like this:

dl {
    display: flex;
    flex-flow: row wrap;
}
dt, dd {
    width: 50%;
}

This code essentially instructs flexbox to arrange items horizontally in a row and wrap them to the next line if they exceed the width of the dl container.

By setting the dt, dd elements to be 50% of the total wrapper width, we ensure that only two elements are displayed in each line at most.

If you want to dive deeper into the concept, you can check out CSS-Tricks for a detailed guide on using flexbox layouts effectively.

Answer 4

Simply put, I would use the display: flex; property on the parent dl element to control its child elements and style them like this:

dl {
    display: flex;
    flex-flow: row wrap;
}
dt, dd {
    width: 50%;
}

This code essentially instructs flexbox to arrange items horizontally in a row and wrap them to the next line if they exceed the width of the dl container.

By setting the dt, dd elements to be 50% of the total wrapper width, we ensure that only two elements are displayed in each line at most.

If you want to dive deeper into the concept, you can check out CSS-Tricks for a detailed guide on using flexbox layouts effectively.

Answer 5

Answer №3

If you're looking to implement flex in your code, it may be necessary to make some structural changes. Check out this comprehensive resource for everything you need to know about flexbox -> A Complete Guide to Flexbox

In regards to your comment

Your current approach seems outdated and unprofessional

I recommend exploring alternative font styling options instead of using dt and dl, as they are quite antiquated

Answer 6

If you're looking to implement flex in your code, it may be necessary to make some structural changes. Check out this comprehensive resource for everything you need to know about flexbox -> A Complete Guide to Flexbox

In regards to your comment

Your current approach seems outdated and unprofessional

I recommend exploring alternative font styling options instead of using dt and dl, as they are quite antiquated

List of descriptions: One pair per line

Answer №1

Answer №2

Answer №3

Similar questions

Displaying text and concealing image when hovering over a column in an angular2 table

Continue scrolling the HTML page before it reaches the end

Converting HTML to PDF using AngularJS

positioning a div based on the location of another div

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

different approach for hiding content on mobile devices

How can you reset the chosen option in a Vue.js dropdown menu?

Is it possible to add additional text to an input field without modifying its existing value?

Using HTML, CSS, and jQuery to create step-based scrollbar navigation

What could be causing the JavaScript on my website to not function properly?

It seems that in Laravel 5.3, it's challenging to add a script to a view for an autocomplete

Toggle the field on and off using HTML and JavaScript from the bottom

Attempting to squeeze a container with a set width into a parent element that spans the entire width of the screen (100

Stop and resume CSS animation when the user hovers over and leaves

The div keeps appearing multiple times while the button remains inactive

Move the check mark to the middle of the screen

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

How to transform text into clickable links using AngularJS

AngularJS button within a Bootstrap navbar

How to render a div in HTML with full CSS styling applied