将导航栏放在<p>元素和图像上方

Question

我的网页上有这个导航栏格式。 但我希望它看起来像这样。导航栏位于图像和相应的段落元素之上。

图片是图元素。这是index.html和css file。谢谢！

Answer 1

问题是你已将image包裹在nav中，只是把它放在外面。

这是您想要的菜单 Working Fiddle

 <nav id="mainnav">
   <p>
      <a href="index.html">Home</a> |
      <a href="aboutus.html">About Us</a> |
      <a href="rooms.html">Rooms</a> |
      <a href="reserve.html">Reservations</a> |
      <a href="#" target="_blank">Local Weather</a> |
      <a href="#" target="_blank">Directions</a>
    </p>
          </nav>
  <figure id="main">
    <img src="http://arabland.cc/css/images/testimonial-bg.jpg" width="369" height="268" alt=""/>
  </figure>