导航栏链接和一个H1

时间:2014-01-27 19:48:44

标签: html css

我正在尝试制作一个带有标题的导航栏,然后每侧有2个链接。 但是当它在本地主机上进行测试时,它似乎就像这样,当我想要它是全部水平时。

LINK LINK
TITLE(h1)
LINK LINK

HTML:

<body>
    <div id="navigation">
    <a href="index.html">Index</a>
        <a href="index.html">Home</a>
        <h1>Home</h1>
        <a href="index.html">Home</a>
        <a href="index.html">James</a>
    </div>
</body>

css:

#navigation 
{
position: fixed;
top: 0;
left:0;
right:0;
width: 100%;
color: #ffffff;
height: 120px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;}

#navigation a 
{
font-size: 18px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation h1
{
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

为什么会这样?

LINK LINK
TITLE
LINK LINK?

谢谢!

2 个答案:

答案 0 :(得分:0)

根据提供的信息,您的标题“h1”似乎设置为display:block。将其更改为display: inline

答案 1 :(得分:0)

<h1>Home</h1>之后移动<div id="navigation">。你的代码应该是

<body>
<div id="navigation">
<h1>Home</h1>
    <a href="index.html">Index</a>
    <a href="index.html">Home</a>
    <a href="index.html">Home</a>
    <a href="index.html">James</a>
</div>
</body>