How to get all values lines up on a list of key: value
Hello! I want to display a list of values and their keys sort of like so:
A: 1
B: 2
The problem is once the lengths of the keys are different, the values don't line up exactly
A: 1
BB: 2
I want to use pure html and css to get this effect
A: 1
BB: 2
With all values lines up
So far all the solutions I've thought of were pretty complicated, and I've been wondering if there's any clean solution? Thank for the help!
4 Replies
: The Description List element - HTML: HyperText Markup Language | MDN
The HTML element represents a description list. The element encloses a list of groups of terms (specified using the element) and descriptions (provided by elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
DL will let you define keys and values separately in separate tags, which you can then position however you want using flex or grid or any other method you prefer
alternatively, an argument can be made that this is tabular data, so you could use a table and get the alignment entirely for free
thanks! I'll try it out tomorrow and close this if it's fixed
just mark it as solved by adding the tag, don't delete the thread 🙂