Gavin T Gavin T - 3 years ago 161
CSS Question

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

I am trying to put a tag inline with an 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.

Thanks in advanced.

(Here is a bunch of unnecessary words because the thing is saying theres too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically ask 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>




Answer Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download