I'm making a mobile web app. At the top of the page, I have a single line on which there is a "Back" link on the left and the pagename on the right. Or so it should be. Instead, I get a back link with the pagename beneath it. Here's my code. I can't figure out how to fix it.
<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/>
Paragraphs (<p>) are block-level elements, which have a container that uses the full width of the browser window, as opposed to in-line elements like <a>, which take their place in the text-flow.
In other words, a paragraph will always start on a "new line", while an anchor will be placed in the current line.
If you want the pagename directly to the right of the link, you could write
<a ...>Back</a>
<span id="name"> PageName </span>
The <span> element is also an in-line element.
this is becuase you are using paragraph:
<p id="name"> PageName </p>
use i.e. <div> instead and format it to align where you like
see this fiddle: http://jsfiddle.net/UQFSw/1/
This is because anchors (links) are inline elements and paragraphs are block elements.
Block-Level vs. Inline Elements
Inline elements behave like text. If they are inserted in the middle of text, they flow along with the text. Block elements take their own space as separately designated sections.
Instead of using a div as suggested above, if you want to use a generic inline element, use a span.
I would suggest instead something like:
<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>