Floated elements gaps between but no explicit padding/margin
I have the below markup that cannot be changed:
<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>
I want it to appear rendered so that the div is all the way to the left and the span is all the way to the right whilst links 1 and 2 are to the right of the span.
Meaning:
|<div> <span><a1><a2>|
Where |'s indicate the edge of the containing div.
I can get the below with float left on the div and float right on the开发者_运维知识库 other elements but you can see this is not exactly what I want.
|<div> <a2><a1><span>|
Given that the data in the span will not always be the same size a fixed margin/padding won't work.
Thanks in advance for any suggestions.
This seems pretty close:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#outer { margin: 0 auto; width: 600px; background: yellow; overflow: hidden; text-align: right; }
#outer div { float: left; }
</style>
</head>
<body>
<div id="outer">
<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>
</div>
</body>
</html>
The containing element is a block level element and thus as wide as it needs to be. Set the text alignment to right and the inline elements go to the right in the correct order. A float left on the first div keeps it on the left.
加载中,请稍侯......
精彩评论