Menu
The following layout renders properly in Chrome, Safari, IE & Opera. In Firefox, the breaks are ignored.
This is the expected result:
My preference is a CSS tweak that will get it working in FF (and keep it working in the others), but I'll take another approach to achieve the same results, if necessary.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0
}
ul li {
clear: both;
}
ul li * {
float: left;
}
ul li div:first-child {
width: 100px;
}
</style>
</head>
<body>
<ul>
<li><div>One</div><div>A</div></li>
<li><div>Two</div><div>B</div></li>
<li><div>Three</div><div>C</div></li>
<li><div>Four</div><div>D - 1<br>D - 2<br>D - 3<br>D - 4</div></li>
</ul>
</body>
</html>
823
br { float:none !important; }
Fiddle
Or use a more specific rule instead of ul li * to not apply float to the brs.
Tested on Nightly 21 and Canary 26. float seems to affect br elements only in Firefox nevertheless.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
