Placing links on one line in html

Question

I have the following code the links appear on separate lines. How do I place them on a single line on the web page-

<p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

Don't use `
` tag here, just `Add a new record View, Edit or Delete Existing Records Go to Home Page` — Heidel, Jun 22 '16 at 06:52
Why do you use `
`? Is it a requirement? If you need to keep them, set their `display` to `inline`. If you don't need to keep them, then remove them and your problem is solved. — Quentin Roy, Jun 22 '16 at 06:55

CalvT · Accepted Answer · 2016-06-22T07:11:34.920

5

If you can't change your html, one way is to add display: inline to your <p> tags.

p {
  display: inline;
}

<p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

Or if you will need to do things like specify height or width, display: inline-block would be the answer.

p {
  display: inline-block;
  height: 50px;
  background: grey;
}

<p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

However, if you want them inline I wouldn't put each link in it's own paragraph, as this is not good practice. Remove the <p> tags, as below:

<a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

edited Jun 22 '16 at 07:11

answered Jun 22 '16 at 06:52

CalvT

3,123
6
37
54

@C0dekid I'm not sure if it would make a difference in this case, but I'll edit my answer. – CalvT Jun 22 '16 at 07:03
@C0dekid What `inline-block` has over `inline` is that you can add height and width - thats the only difference - see http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – CalvT Jun 22 '16 at 07:05
@C0dekid You do realize the OP said *How do I place them on a single line on the web page* right? – CalvT Jun 22 '16 at 07:10
Oh.. i'm sleeping I think, I'm sorry! Haha, have my upvote :-) – node_modules Jun 22 '16 at 07:11

score 2 · Answer 2 · edited Jun 22 '16 at 06:56

2

Although it is possible to do it the way you did it with p tag I would recommend doing it with ul and then li tags.

li
{
  display:inline-block;
}

<ul>
  <li><a href="new.php">Add a new record</a></li>
  <li><a href="view.php">View, Edit or Delete Existing Records</a></li>
  <li><a href="index.html">Go to Home Page</a></li>
</ul>

edited Jun 22 '16 at 06:56

Quentin Roy

7,677
2
32
50

answered Jun 22 '16 at 06:54

wegelagerer

3,600
11
40
60

score 1 · Answer 3 · edited Jan 11 '21 at 08:48

1

<a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

The <p> tag creates a new paragraph so if you want the links to appear in a single line, you just need to get rid of them

edited Jan 11 '21 at 08:48

sonali

762
10
23

answered Jan 10 '21 at 01:34

PepperGarner

11
1

score 0 · Answer 4 · answered Jun 22 '16 at 06:53

0

Delete the p

<a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

answered Jun 22 '16 at 06:53

prgrm

3,734
14
40
80

score 0 · Answer 5 · answered Jun 22 '16 at 06:54

0

Try this

<a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

answered Jun 22 '16 at 06:54

Vipul

356
6
18

kkakkurt · Answer 6 · 2016-06-22T07:07:51.013

0

You can also do it with display:inline-block. Because inline elements can not have a width and height set, but inline-block elements respects height and width, respects top and bottom margins and paddings.

a {
  display: inline-block;
}

<a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

edited Jun 22 '16 at 07:07

answered Jun 22 '16 at 06:56

kkakkurt

2,790
1
30
33

score 0 · Answer 7 · answered Jun 22 '16 at 07:05

P tag is block level element so it will take full width so if you need this in one line then you can add css display:inline-block for p tag.

Best way of navigation in one line:

You can use ul instead on p tag:

<ul>
    <li><a href"#">test</a></li>
    <li><a href"#">test</a></li>
    <li><a href"#">test</a></li>
</ul>

Css for above HTML:

li{display:inline-block}

Placing links on one line in html

7 Answers7