我在尝试将按钮放在导航栏旁边时遇到问题答案

【问题标题】：I am having trouble trying to put my buttons next to my navigation bar我在尝试将按钮放在导航栏旁边时遇到问题
【发布时间】：2013-08-17 00:10:14
【问题描述】：

第一篇文章和相对较新的编程，我无法尝试将我的按钮放在页面上方和侧面导航栏旁边，请查看 picture 和代码：

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

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

【问题讨论】：

标签： html css button navigation positioning

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以像这样使用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>

Working Example

MDN documentation for display and display values

【讨论】：