Utilizing <dt> and <dd> typically assumes a single line definition for dd. However, in my scenario, I have multiple entries for the definition that I need to correctly display (the exact method will be clarified after reviewing the attached image). Therefore, I am employing <da> which has been styled with CSS (margin: 0 0 0 21.3%) to attain the desired style below. Nonetheless, I am encountering the following issues:
- A line appears above the first entry (i.e., Mr. A ?).
- Testing on monitors of different sizes results in shifted alignment. For instance, on a smaller monitor, using margin: 0 0 0 22.3% works!)
- When zooming in and out, the alignment shifts. (Zooming in shifts left, zooming out shifts right)
Current State
Desired Outcome
Given that I have implemented the design using <dt> and <dd> across several pages, it would be beneficial to find a solution within this framework.
.top-class-name {
margin-left: 25px;
background-color: white;
padding: 0.5ex;
width: 75%;
}
.top-class-name > div {
margin-bottom: 1em;
}
.top-class-name dl {
margin: 0;
}
dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.top-class-name dt{
display: inline-block;
vertical-align: top;
width: 220px;
}
.top-class-name dd {
display: inline-block;
vertical-align: top;
margin: 0;
width: 73%;
}
dd {
display: block;
-webkit-margin-start: 40px;
}
.top-class-name dd:after {
content: '\A';
white-space: pre;
}
.top-class-name da{
display: block;
vertical-align: middle;
margin: 0 0 0 21.3%;
width: 43%;
}<div class="top-class-name">
<div>
<dl>
<dt>Other Term :</dt>
<dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
<dt>Other Term :</dt>
<dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
<dt>Guest Names :</dt>
<da>Mr. A</da>
<da>Mr. B</da>
<da>Mr. Z</da>
<dt>Other Term :</dt>
<dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
<dt>Other Term :</dt>
<dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
</dl>
</div>
</div>