5

It's for a definition list, which only allows dt and dd tags. It is not valid to wrap a dt and its associated dd inside of a div. Example definition list:

<dl>
    <dt>Name:</dt>
    <dd>Nick</dd>
    <dt>Age:</dt>
    <dd>26</dd>
    <!-- etc -->
</dl>

I want the dt and dd tags to be inline-blocks that wrap. I want to allow up to two dt/dd pairs on one line, but I never want it to wrap after a dt tag. In other words, I never want "Name" and "Nick" to be on different lines. I never want "Age" and "26" to be on different lines either. Perhaps all four of them are on one line, or perhaps "Name" and "Nick" are on one line and "Age" and "26" are on the next line, depending on the viewport width.

I tried putting &nbsp; between the elements but that didn't work. I can't wrap the dt with its associated dd because technically that is invalid markup.

Is there any correct solution to this problem? Or do I have to abandon semantic principles in order to get the styling I want?

Edit: This is not a duplicate of How to style dt and dd so they are on the same line? because I said "I want to allow up to two dt/dd pairs on one line". Whether there is one or two pairs depends on variable content.

Community
  • 1
  • 1
Nick Manning
  • 2,828
  • 1
  • 29
  • 50
  • I'm not really sure if I understand your problem correctly but you could give you dt's and dd's a width of 25%, or you could make multiple dl's. – Jarno May 11 '16 at 19:31
  • I can't make them 25% because the text content is unknown (inserted with a template engine). I want the text width to determine whether there are four elements on a line or two. As for your second solution, this would work buuuuuuut...they should semantically all be part of the same list. – Nick Manning May 11 '16 at 19:33
  • 1
    Possible duplicate of [How to style dt and dd so they are on the same line?](http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line) – BSMP May 11 '16 at 19:34
  • @BSMP but depending on the content there may be 4 elements on one line. – Nick Manning May 11 '16 at 19:36
  • What's your browser support look like? Flexbox may be your answer. – chazsolo May 11 '16 at 20:00
  • I don't really worry about browser support because I can always hack in a fallback for old browsers. But even with flexbox I can't think of a solution. – Nick Manning May 11 '16 at 20:01
  • Well, [I got somewhere](https://jsfiddle.net/osvd7xts/) - doesn't match your requirements 100% but it is semantic – chazsolo May 11 '16 at 20:06
  • chazsolo, thanks for the attempt. Problem is, the main requirement is that `dd` doesn't wrap by itself. It stays on the same line as its `dt` – Nick Manning May 11 '16 at 20:13
  • Did you find a way? I am looking for a solution for exactly this problem. – abdfahim Aug 19 '17 at 21:42
  • Nope...I just wrapped them all in seperate dl tags. Let me know if you come across something. – Nick Manning Aug 19 '17 at 21:50

0 Answers0