3

如何在同一行显示我的 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;
}
4

4 回答 4

3

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

http://jsfiddle.net/GP2pX/

于 2013-06-20T15:58:36.757 回答
1

将您的 H1 和 UL 元素设置为显示内联块,并给它们一个宽度(或设置为自动)并添加一个厚脸皮的 hack 以满足 ie6 和 7

例如对于 ul 和 h1 样式

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

#header ul li {
    display: inline;    
}
于 2013-06-20T15:57:58.910 回答
0

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

#header h1, #header ul {display:block;float:left;}
于 2013-06-20T15:54:46.047 回答
0

我认为您还必须在您的 css 代码中添加以下内容

#header ul {
   display:inline;
   list-style:none;
   margin:0px;
   padding:0px;
}
于 2013-06-20T15:56:40.373 回答