I need to structure html css Key value pair-CodePudding

If you have this HTML:

<dl >
  <dt>key:</dt>
  <dd>value</dd>
  <dt>keyyy:</dt>
  <dd>valueeeee</dd>
</dl>

how can you accomplish and structure up so the content looks like

key: value
key: value

Tried #1: With flex but it doesn't work because I'm only allowed to play with the HTML presented at the top, I can't add any divs or such if I don't do it through some css hack because the code is coming from another place.

Tried #2: With grid but then the outcome looks like: https://jsfiddle.net/fo6ckghd/2/

its too much space between key and value and it doesnt get nice if the length is different on each key value pair.

Tried #3:

dl 
  dt
    display: inline-block;
  dd
    display: contents;

This did not work either because after first key:value the second one would be the same line, I tried with ::before ::after to add a new line but didnt succeed.

CodePudding user response：

How about this??

I don't quite understand it but the dd::after rule adds a line break after the dd elements (stolen from https://www.educative.io/answers/how-to-add-a-line-break-using-css)

dd, dt {
  display: inline;
  margin: 0;
}

dd::after{
    content: "\a";
    white-space: pre;
}

<dl >
  <dt>key:</dt>
  <dd>value</dd>
  <dt>keyyy:</dt>
  <dd>valueeeee</dd>
</dl>

CodePudding user response：

Your dl is already your container, you don't need to have any extra div for flex to work.

If you use flex and want your columns to be aligned, then you'll need to give the first column a specific width, for example 25%.

If you use flex and don't mind if the columns are aligned, and are instead just worried about them being beside each other, then that's no problem.

If you use grid then you can align the columns easily, with one being set to be the content's max width, and the other set to fill the available space remaining out of the two columns set.

/**
 * Relevant styles 
 */
.flex {
  border: 2px solid pink;
  padding: 1em;
  margin: 0;
  gap: .5em 1em;
  display: flex;
  flex-wrap: wrap;
}


/* Don't grow, always be 25% */
.flex--even dt {
  flex: 0 0 25%;
}


/* Don't grow, but be equal to the content's max-width */
.flex--uneven dt {
  flex: 0 0 max-content;
}


/* Grow with flex, but never be more than 66% */
.flex>dd {
  flex: 1 0 66%;
}


/*
 First columns will always be the width of the one
 with most content, then the second column will
 fill the space
 */
.grid {
  border: 2px solid lime;
  padding: 1em;
  margin: 0;
  gap: .5em 1em;
  display: grid;
  grid-template-columns: max-content 1fr;
}

.grid dt {
  margin: 0;
}


/**
 * Base stuff 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-items: center;
  background: #ffcc33;
}

main {
  max-width: 75vw;
  background: white;
  padding: 2em;
  display: grid;
  gap: 1.5em;
}

dl:not(.unstyled)>* {
  border: 1px solid #ffcc3366;
}

dl:not(.unstyled) dd {
  display: unset;
  margin-inline-start: unset;
}

<html>

<body>

  <main>

    <dl >
      <dt>Item One</dt>
      <dd>Item Two</dd>
      <dt>Item Three</dt>
      <dd>Item Four</dd>
    </dl>

    <dl >
      <dt>Item One</dt>
      <dd>Item Two</dd>
      <dt>Item Three</dt>
      <dd>Item Four</dd>
    </dl>

    <dl >
      <dt>Item One</dt>
      <dd>Item Two</dd>
      <dt>Item Three</dt>
      <dd>Item Four</dd>
    </dl>

    <dl >
      <dt>Item One</dt>
      <dd>Item Two</dd>
      <dt>Item Three</dt>
      <dd>Item Four</dd>
    </dl>

  </main>

</body>

</html>

See also here, where the styles are done in SASS.