浮动元素之间有间隙但没有明确的填充/边距答案

【问题标题】：Floated elements gaps between but no explicit padding/margin浮动元素之间有间隙但没有明确的填充/边距
【发布时间】：2009-10-28 23:20:53
【问题描述】：

我有以下无法更改的标记：

<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>

我希望它显示出来，以便 div 一直在左侧，跨度一直在右侧，而链接 1 和 2 在跨度的右侧。

意思：

|<div>                   <span><a1><a2>|

其中 |'s 表示包含 div 的边缘。

我可以在 div 上向左浮动并在其他元素上向右浮动，但您可以看到这并不是我想要的。

|<div>                   <a2><a1><span>|

鉴于跨度中的数据并不总是相同的大小，固定边距/填充将不起作用。

提前感谢您的任何建议。

【问题讨论】：

标签： html css

【解决方案1】：

这似乎很接近：

<!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>

包含元素是块级元素，因此可以根据需要设置宽度。将文本对齐设置为右对齐，并且内联元素以正确的顺序向右移动。第一个 div 上的浮点数使其保持在左侧。

【讨论】：