Question

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

有一个jsFiddle

初学者问题。 #navigation菜单没有出现。如果我在CSS中注释#navigation它确实出现了，但不是内联的。

Html：

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

Answer 1

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

#navigation li { display: inline;}

或者你可以添加：

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

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

Answer 2

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

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

请参阅：http://jsfiddle.net/4zzkV/8/embedded/result/

Answer 3

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

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

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

导航菜单消失

3 个答案: