lining up multiple dd tags
I have a dl where the dt's may have multiple dd's that I want to line up. Unfortunately, the second dl line shifts left. How can I adjust the styling to prevent this? I cannot edit the html since I get it from an app, and this is only an example, there are anywhere from 6 to 10 dt tags per page that have more than one dd so this has to be a general purpose solution.
dl {
width: 450px;
overflow: hidden;
background: #ff0;
}
dt {
padding: 0 4px 0 4px;
float: left;
width: 125px;
background: #cc0;
clear: left;
text-align: right;
}
dd {
padding: 0 4px 0 4px;
margin: 0;
float: left;
width: 250px;
background: #dd0;
}<body>
<h3>Test McTesterson</h3>
<dl>
<dt>Personal Phone</dt>
<dd>555-555-5555</dd>
<dt>Personal Email</dt>
<dd>test@test.com</dd>
<dt>Address</dt>开发者_运维技巧
<dd>
<span>123 Main St</span>
</dd>
<dd>
<span>Cityburg</span>
<span>Qa</span>
<span>12345</span>
</dd>
<dt>Birthdate</dt>
<dd>19801230</dd>
</dl>
<body>One way:
dd + dd {
display: block; /* to force new line */
margin: 0 0 0 4em; /* whatever the width of dt */
}
You could also not use multiple dd's and just put all the info into a single dd.
加载中,请稍侯......
精彩评论