How to display h1 and ul link inline?

问题

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;
}

回答1:

add #header ul { display:inline; }. That should do it.

http://jsfiddle.net/GP2pX/

回答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;    
}

回答3:

Try floating your elements to the left or use inline-block

#header h1, #header ul {display:block;float:left;}

回答4:

I think that you have to put also the following in your css code

#header ul {
   display:inline;
   list-style:none;
   margin:0px;
   padding:0px;
}

来源：https://stackoverflow.com/questions/17218246/how-to-display-h1-and-ul-link-inline

标签

html

css

html-lists

inline