Question

如何在同一行显示我的h1和ul标签？这是我的标题文本，它位于主要内容之上（这与我必须添加更多文本的问题无关）

这是我的代码：

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

Answer 1

添加#header ul { display:inline; }。应该这样做。

http://jsfiddle.net/GP2pX/

Answer 2

将H1和UL元素设置为显示内联块，并为它们提供宽度（或设置为自动）并添加厚颜无耻的黑客以满足ie6＆amp; 7

e.g。对于ul和h1样式

#header h1, #header ul {
    display: inline-block;
    width: auto;
    zoom: 1;
    *display: inline; /* ie6 & 7 */
}

#header ul li {
    display: inline;    
}

Answer 3

尝试将元素浮动到左侧或使用inline-block

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

Answer 4

我认为你必须在你的css代码中加入以下内容

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

如何显示内联的h1和ul链接？

4 个答案: