Html 如何内联显示 h1 和 ul 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17218246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display h1 and ul link inline?
提问by Anthony Boardman
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)
如何在同一行中显示我的 h1 和 ul 标签？这是我在主要内容上方的标题文本（这与我必须添加更多文本的问题无关）
This is my code:
这是我的代码：
HTML:
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:
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;
}
回答by Samuel Reid
add #header ul { display:inline; }. That should do it.
添加#header ul { display:inline; }. 那应该这样做。
回答by MiiisterJim
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
将你的 H1 和 UL 元素设置为显示 inline-block，并给它们一个宽度（或设置为自动）并添加一个厚脸皮的 hack 以满足 ie6 和 7
e.g. for the ul and h1 styles
例如对于 ul 和 h1 样式
#header h1, #header ul {
display: inline-block;
width: auto;
zoom: 1;
*display: inline; /* ie6 & 7 */
}
#header ul li {
display: inline;
}
回答by Stefan
Try floating your elements to the left or use inline-block
尝试将元素向左浮动或使用 inline-block
#header h1, #header ul {display:block;float:left;}
回答by user2505712
I think that you have to put also the following in your css code
我认为你还必须在你的 css 代码中加入以下内容
#header ul {
display:inline;
list-style:none;
margin:0px;
padding:0px;
}
