0

第一篇文章和相对较新的编程，我在试图让我的按钮在页面上方和侧面导航栏旁边时遇到问题，请查看图片和代码：

HTML：

 <nav>
        <ul>
               <li> <a href="index.html">Home</a></li>
               <li> <a href="news.html">News</a></li>
               <li> <a href="events.html">Events</a></li>
               <li> <a href="galleries.html">Galleries</a></li>
               <li> <a href="videos.html">Videos </a></li>
               <li> <a href="history.html">History</a></li>
               <li><a href="contact.html"> Contact</a></li>
           </ul>    
      </nav>    



      <a id="bigthumbnailone" href="news.html">New Website Launched!</a>          
      <a id="bigthumbnailtwo" href="news.html">Next Major: i49 </a>

CSS：

* {
margin:0px;
padding:0px;
  }

  a:link {
text-decoration:none;
color:#0099FF;
  }

  a:hover {
color:#0066FF;
font-weight:bold;
   }

  a:visited {
text-decoration:none;
color:#0099FF;
   }


  nav ul li {
display:;
margin:1px;
padding:30px;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
  }


 /*end navigation*/

 #bigthumbnailone {
display:block;
width:600px;
height:300px;
text-decoration:none;
text-align:left;
font-family:Segoe UI Light;
font-size:25px;
background-image:url(../images/thumbnails/messi.png);
outline-style:solid;
outline-color:#0099FF;
margin: 0 auto;
 }

  #bigthumbnailtwo {
display:block;
width:600px;
height:300px;
text-decoration:none;
text-align:left;
font-family:Segoe UI Light;
font-size:25px;
background-image:url(../images/thumbnails/messi.png);
outline-style:solid;
outline-color:#0099FF;
margin: 0 auto;
  }

我需要添加什么以确保我的导航栏和按钮都可以彼此相邻？

4

2 回答 2

0

你可以display:inline-block;像这样使用：

nav ul li {
    display:inline-block;
    margin:1px;
    padding:30px;
    list-style-type: none;
    font-family:Segoe UI Light;
    font-size:30px;
}

 #bigthumbnailone, #bigthumbnailtwo {
    display:inline-block;
    width:600px;
    height:300px;
    text-decoration:none;
    text-align:left;
    font-family:Segoe UI Light;
    font-size:25px;
    background-image:url(../images/thumbnails/messi.png);
    outline-style:solid;
    outline-color:#0099FF;
    margin: 0 auto;
}

并将您的缩略图放在无序列表中，如下所示：

<nav>
    <ul>
        <li> <a href="index.html">Home</a>

        </li>
        <li> <a href="news.html">News</a>

        </li>
        <li> <a href="events.html">Events</a>

        </li>
        <li> <a href="galleries.html">Galleries</a>

        </li>
        <li> <a href="videos.html">Videos </a>

        </li>
        <li> <a href="history.html">History</a>

        </li>
        <li><a href="contact.html"> Contact</a>

        </li> <a id="bigthumbnailone" href="news.html">New Website Launched!</a>  <a id="bigthumbnailtwo" href="news.html">Next Major: i49 </a>
    </ul>
</nav>

工作示例

显示和显示值的 MDN 文档

于 2013-08-16T15:43:10.447 回答
0

我会在你的按钮周围添加一个 div，然后浮动：离开你的导航和按钮周围的 div。

于 2013-08-16T15:30:13.813 回答