Absolute positioning ul leads to strange white-space wrapping issue in Firefox & Opera. How to resolve?
I have the following HTML test page:开发者_如何学运维
<!DOCTYPE html>
<html>
<head>
<title>Position Break</title>
<style type="text/css">
section {
position: relative;
width: 100%
}
li {
display: inline;
}
#list_two {
position: absolute;
top:0;
width:100%;
}
</style>
</head>
<body>
<section>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
<section>
<ul id="list_two">
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
</body>
</html>
The (for me) expected output of which is:
Item One Item Two
Item One Item Two
i.e. Both lists should be displayed inline. This is the observed output in Chrome (8) and Safari (5.0.3) but both Opera (10.10) and Firefox (3.6) produce an unexpected output:
Item One Item Two
Item
One
Item
Two
I've tried positioning the containing section element instead of the ul. I've tried assigning explicit width and height values at each step up the DOM but to no avail -- I can't seem to find the combination that will get the Chrome/Safari behaviour in Firefox/Opera. How's it done?
TIA!
add display: block; to section {..}
加载中,请稍侯......
精彩评论