0

我正在制作一个移动网络应用程序。在页面的顶部，我有一行，左侧是“返回”链接，右侧是页面名称。或者应该是这样。相反，我得到了一个带有其下方页面名称的反向链接。这是我的代码。我不知道如何解决它。

<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/>
4

3 回答 3

2

这是因为您使用的是段落：

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

改用 ie<div>并将其格式化以对齐您喜欢的位置

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

于 2012-04-05T15:23:02.977 回答
1

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

块级与内联元素

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

div如果您想使用通用内联元素，请不要使用上面建议的 a ，而是使用 a 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>
于 2012-04-05T15:35:03.373 回答
1

段落 ( <p>) 是块级元素，它有一个使用浏览器窗口的整个宽度的容器，而不是像<a>，在文本流中占据它们的位置的内联元素。

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

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

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

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

于 2012-04-05T15:38:39.363 回答