0

更新：仍然是一个初学者问题 - 导航现在出现但不是内联的。我在http://jsfiddle.net/4zzkV/有一个 jsFiddle

初学者问题。未出现的#navigation 菜单。如果我注释掉 CSS 中的#navigation，它确实会出现，但不会内联。

网页：

        <div id="page">
         <div id="content">
              <div id="header">
                  <div id="menu" >
                     <h1>Title</h1
                  </div>
                  <ul id="navigation">
                      <li id="contact_us"><a href="contact-us.html">Contact Us</a></li>
                      <li id="about_us"><a href="about-us.html">About Us</a></li>
                      <li id="index"><a href="index.html">Home</a></li>
                  </ul>
               </div>
               <div id="middle">

                   <div id="main_image">
                        <img src="images/eiffel_900_500.png" alt="Paris and Brooklyn">
                   </div>

              </div>
              <div id="footer">
              </div>
         </div>
    </div>

CSS：

 #content{
   width: 900px;
   height: 200px;
   margin-left:auto;
   margin-right:auto;
 }

 #header{

    margin: 0;
    background-image: url(../images/header2.png);
    background: rgba(255,255,255,0.5);
     float:left;
 }

 #menu {}

 #navigation {float:right; display:inline;}
4

3 回答 3

1

不确定您到底要做什么，但如果您希望链接显示在右侧和标题下方的同一行上，您需要将以下内容添加到 CSS

#navigation li { display: inline;}

或者，您可以添加以下内容：

#navigation li {float: right; margin-left: 10px}

您想告诉每个链接浮动或显示内联，而不是主 div。

于 2013-06-12T01:50:22.597 回答
0

导航项不是内联的，因为您没有将它们设置为内联。尝试设置

#navigation li {
    list-style-type: none;
    display: inline;
}

见：http: //jsfiddle.net/4zzkV/8/embedded/result/

于 2013-06-12T01:45:27.357 回答
0

我不知道你的问题是否解决了，但我想这就是你需要的
Fiddle

我添加了该line-height方法，如果您可以的话。

更新：如果你看到小提琴，还有另一种方法可以在没有明确设置标题高度的情况下工作

于 2013-06-12T04:53:59.750 回答