html - How to style dt and dd so they are on the same line? - Stack Overflow
https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-lineA very simple approach to laying out definition lists with nice alignments using CSS grids. The example CSS is:
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
Tags
Related By Tags
- 🔗 Grid for layout, Flexbox for components
- 🔗 Web Design Experiments by Jen Simmons
- 🔗 Fixed Table Headers | Adrian Roselli
- 🔗 CSS Scroll Snap Carousel
- 🔗 css for css baby 1: stupid text tricks
- 🔗 Colorable
- 🔗 Can I use... Support tables for HTML5, CSS3, etc
- 🔗 The Performance Inequality Gap, 2023 - Infrequently Noted
- 🔗 Old CSS, new CSS / fuzzy notepad
- 🔗 LaTeX.css — Make your website look like a LaTeX document
Details
- Revised
- Created
- Edited