У меня возникли проблемы с установкой кнопок рядом с моей навигационной панелью

Question

первое сообщение и относительно новое для программирования, у меня возникают проблемы с попыткой получить мои кнопки дальше вверх по странице и рядом с моей боковой панелью навигации, пожалуйста, просмотрите 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; 
    } 

Что мне нужно добавить, чтобы убедиться, что моя навигационная панель и кнопки могут оба быть рядом друг с другом?

Answer 1

Я бы добавил div вокруг ваших кнопок, а затем плавал: оставил ваш навигатор и div, который окружает кнопки.

Answer 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