我正在尝试制作带有标头的导航栏,然后在每一侧进行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?
谢谢!
基于提供的信息,看来您的标题" H1"设置为display:block
。将其更改为display: inline
。
只需在<div id="navigation">
之后移动<h1>Home</h1>
即可。您的代码应该是
<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>