Question

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

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

我希望它显示为渲染，以便div一直向左，并且跨度一直向右，而链接1和2位于跨度的右侧。

含义：

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

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

我可以得到下面的浮动左边的div并浮在其他元素上，但你可以看到这不是我想要的。

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

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

提前感谢任何建议。

Answer 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上留下的一个浮子将它保持在左侧。

浮动元素之间存在间隙，但没有明确的填充/边距

1 个答案: