CODEWITHSUNDEEP
htmlcssinlinedisplay
Gavin T
Gavin T

Reputation: 61

How do I put a p and an a tag inline in html?

I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.

(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).

Here's some example code:

body {
	margin: 0;
	padding: 0;
	background-color: #efefef;
}

header {
	margin: 0;
	margin-top: -10px;
	background-color: #ffffff;
}

header p {
	margin: 0;
	font-family: "arial";
	font-size: 50px;
	color: #3c3c3c;
	margin-top: 10px;
	margin-left: 10px;
	text-align: center;
}

header a {
}

#information {
	width: 500px;
	height: 250px;
	background-color: #ffffff;
	box-shadow: 7px 7px 4px grey;
	margin-left: 100px;
	margin-top: 150px;
}

#information p {
	font-family: "arial";
	font-size: 20px;
	color: #1febff;
}

#delete {
	margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
	<title>SaHa | Color Scheme</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

	<header>
		<p>SaHa</p>

		<a href="#">Menu</a>
	</header>

	<div id="information">
		<p>Pretend that there is a bunch of important information here even though there really isn't.
		   This is normally where a message that actually means something would go, but this is just a
		   placeholder because I have nothing important to put here right now.
		</p>
	</div>

	<div id="delete"></div>

</body>
</html>

Upvotes: 1

Views: 3039

Answers (2)

Misacorp
Misacorp

Reputation: 71

Could you specify which elements in your example code you want inline?

Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.

Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.

header p {
  display: inline-block;
}

EDIT: Based on further comments, here is a solution to what you are looking for.

First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).

<h1>SaHa</h1>
<nav>
  <a href="#">Menu</a>
  <a href="#">Thing</a>
  <a href="#">Stuff</a>
</nav>

On the CSS side I've made two crucial changes.

First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.

header {
  text-align: center;
  position: relative;
}

Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!

nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?

Upvotes: 0

Srajan Chansoriya
Srajan Chansoriya

Reputation: 7

  1. In your HTML, try directly typing or

    after whatever text you want it to appear.

For example:<div>When i came<a> ut yiur name</a>so what do i do</div>

  1. In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.

For example:

a {display:inline-block;}

Upvotes: 1

Related Questions