Before diving in, let me clarify something. I would normally encase dd, dl, and dt in pointy brackets <>, but due to technical limitations, the page is interpreting them as actual HTML code. Please bear with me.
I'm currently grappling with the dl, dt, and dd tags within an HTML context. Specifically, I'm crafting a questionnaire. The query or caption resides in the dt tag, with form-related inquiries (like select or input) nestled between the dd tags. By floating: left on the dt tag, I've managed to align the question/caption dt beside the corresponding form dd rather successfully. However, here lies my quandary: I yearn for a break in the rows. Allow me to give you an idea of my present layout: Every line features a dt and dd tag positioned side by side through a float property applied to 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;
}
The main issue at hand is this: The two lines (each consisting of one question and one answer) lack the desired spacing. I attempted introducing the margin-bottom CSS property to the dt tag, but it led to undesirable outcomes. Do you have any suggestions on how I can insert space between these rows? Appreciate any assistance provided.