How to display h1 and ul link inline?
23,113
Solution 1
add #header ul { display:inline; }
. That should do it.
Solution 2
Set your H1 and UL elements to display inline-block, and give them a width (or set to auto) and add a cheeky hack to satisfy ie6 & 7
e.g. for the ul and h1 styles
#header h1, #header ul {
display: inline-block;
width: auto;
zoom: 1;
*display: inline; /* ie6 & 7 */
}
#header ul li {
display: inline;
}
Author by
Anthony Boardman
Updated on June 21, 2020Comments
-
Anthony Boardman almost 4 years
How do I display my h1 and ul tag in the same line? This is for my header text which is above the main content (This isn't anything to do with the question I had to add more text)
This is my code:
HTML:
<div id="header"> <h1>Logo</h1> <ul> <li><a href="index.html">Home</a> |</li> <li><a href="fixtures.html">Fixtures & Results</a> |</li> <li><a href="news.html">News</a> |</li> <li><a href="players.html">Player</a> |</li> <li><a href="table.html">Table</a> |</li> </ul> </div>
CSS:
#header{ margin:0px; padding:0px; color:white; background-color:red; width:100%; } #header h1{ display:inline; } #header ul li{ display:inline; } #header ul li a{ text-decoration:none; font-size:16px; font-weight:bold; color:white; } #header ul li a:hover{ text-decoration:underline; }