CODEWITHSUNDEEP
htmlcssformscss-float
user4826496
user4826496

Reputation:

Spacing between lines of <dt><dd> tags

Before you read, note this. I'd love to put the pointy brackets <> around dd, dl, and dt, but unfortunately, the page is reading them as actual HTML code, not text. Please bear with me.

I have a problem with the dl, dt, and dd tags in HTML. I am designing a questionnaire of sorts. I have the question/caption in the dt tag, and then the HTML form questions(E.G. select or input) between the dd tags. I have the question/caption dt aligned next to the corresponding form dd using float: left on the dt tag. This is working fine. However, my problem is this: I would like a line break between the rows. This is an approximation of my current code: Each line has a dt and dd tag aligned side-by-side using a float attribute on the dt tag.

<dl>
    <dt class='list-item'>Question 1</dt>
    <dd class='list-item'> <input type='text' maxlength='3'> </dd>
    <br />
    <dt class='list-item'> Question 2</dt>
    <dd class='list-item'> 
    <select required>
    <option value='one'> choice1</option>
    <option value='two'> choice1</option>
    </select>
    </dd> 
</dl>

and the CSS

.list-item{
margin-left: 5%;
width: 45%
}
dt{
float: left;
text-align: center;
}

My problem is this: The two lines (each with one question and one answer) do not have the desired spacing. I have tried adding the margin-bottom CSS attribute to the dt tag, and it just messed it up. Any suggestions to put spacing between the two lines? Thanks for any help.

Upvotes: 0

Views: 4131

Answers (2)

Paulie_D
Paulie_D

Reputation: 115288

Can't you just give each dt some top margin?

.list-item {
  margin-left: 5%;
  width: 45%
}
dt {
  border: 1px solid red;
  margin-top: 1em;
}
<dl> <dt class='list-item'>Question 1</dt>

  <dd class='list-item'>
    <input type='text' maxlength='3' />
  </dd>
  
  <dt class='list-item'> Question 2</dt>
  <dd class='list-item'>
    <select required>
      <option value='one'>choice1</option>
      <option value='two'>choice1</option>
    </select>
  </dd>
  
</dl>

EDIT: Apparently I missed the requirement that each dt/dd combo should be on one line.

dl {
  overflow: hidden;
  width: 80%;
  margin: auto;
}
dt, dd {
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  margin-bottom: 10px;
  background:lightblue
  
}
<dl> <dt class='list-item'>Question 1</dt>

  <dd class='list-item'>
    <input type='text' maxlength='3' />
  </dd>
  
  <dt class='list-item'> Question 2</dt>
  <dd class='list-item'>
    <select required>
      <option value='one'>choice1</option>
      <option value='two'>choice1</option>
    </select>
  </dd>
  
</dl>

Upvotes: 1

divy3993
divy3993

Reputation: 5810

I think this might helps you:

DEMO

.list-item {
    margin-left: 5%;
    width: 45%
}
dt,dd{
display:table-cell;
margin:0px 5px;
}
dt{
float: left;
text-align: center;
border:1px solid #333; /*Remove this it's just for checking space it leaves */ 
}
<dl> <dt class='list-item'>Question 1</dt>

    <dd class='list-item'>
        <input type='text' maxlength='3' />
    </dd>
    <br /> <dt class='list-item'> Question 2</dt>

    <dd class='list-item'>
        <select required>
            <option value='one'>choice1</option>
            <option value='two'>choice1</option>
        </select>
    </dd>
</dl>

Upvotes: 0

Related Questions