Folgende Problemstellung: Eine Description List die horizontal ausgerichtet wird, jedoch hatte ich das Problem das bei einem zu hohen Text (also im <dd> ) Element der Hintergrund des dt nur bis zur Höhe des dt Elements blieb. Einfache Lösung (eigentlich offensichtlich und vermutlich gibt es schon 100e Anleitungen dazu)
dl.horizontal {
display: block;
border: 1px solid #ddd;
background-color: #f5f5f5;
}
.horizontal dt {
float: left;
width: 30%;
overflow: hidden;
clear: left;
text-align: right;
white-space: nowrap;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
min-height: 25px;
padding-top: 10px;
text-align: left;
}
.horizontal dt span{
padding-left: 15px;
}
.horizontal dd {
border-top: 1px solid #ddd;
margin-left: 30%;
min-height: 25px;
padding-top: 10px;
padding-left: 15px;
border-left: 1px solid #ddd;
background-color: #ffffff;
}
.horizontal dt:first-of-type {
border-top: none;
}
.horizontal dd:first-of-type {
border-top: none;
}
Es wird einfach dem dl Element ein grauer Background gegeben und die dd Elemente erhalten einen weißen Hintergrund. Probleme könnten hier noch auftreteten wenn das dt Element zu groß werden würde. (dl -horizontal wurde aus Boostrap 3 übernommen)