屏幕元素跳过一行没有可观察到的原因

Question

我正在制作一个移动网络应用。在页面顶部，我有一行，左边有一个“Back”链接，右边有一个pagename。或者它应该是。相反，我得到一个带有下面的页面名的反向链接。这是我的代码。我无法弄清楚如何解决它。

<a style="text-decoration:none" href="resultsMap.html?radius=0&latitude=37.33&longitude=-121.85&j=true">Back</a>
<p id="name"> PageName </p>
        <hr/>

Answer 1

这是因为你正在使用段落：

<p id="name"> PageName </p>

使用ie <div>代替并格式化以符合您喜欢的位置

---

看到这个小提琴： http://jsfiddle.net/UQFSw/1/

Answer 2

这是因为锚点（链接）是内嵌元素，段落是块元素。

Block-Level vs. Inline Elements

内联元素的行为类似于文本。如果将它们插入文本的中间，它们将与文本一起流动。块元素将自己的空间作为单独指定的部分。

如果您想使用通用内联元素，而不是使用上面建议的div，请使用span。

我建议改为：

<div style="border-bottom:1px solid black;">
    <a style="text-decoration:none" href="resultsMap.html?radius=0&latitude=37.33&longitude=-121.85&j=true">Back</a>
    <span style="float:right;">Page Name</span>
</div>

Answer 3

段落（<p>）是块级元素，它有一个使用浏览器窗口全宽的容器，而不是像<a>这样的内联元素，它们取代了它们文本流。

换句话说，一个段落将始终在“新行”上开始，而锚点将放在当前行中。

如果您希望页面名称直接位于链接的右侧，则可以编写

<a ...>Back</a>
<span id="name"> PageName </span>

<span>元素也是一个内联元素。