Align menu with CSS

Question

I have this menu that at the moment has two ID that may be more.

  <ul>
  <li><span class="ytVideo" data-videoID="6AmRg3p79pM">(Youtube 1)</span></li>
  <li><span class="ytVideo" data-videoID="El3IZFGERbM">(Youtube 2) </span>       
</li>

As you can see there are two Youtube Ids on them, I would like to line them up next to each other. instead of one below the other. is a clickable menu.

menu css

  #videoGallery ul {
list-style: none;
margin: 0;
padding: 0;
 }
 #videoGallery span {
display: block;
background-color: steelblue;
color: #fff;
font-family: sans-serif;
cursor: pointer;
padding: 4px 10px;
border-bottom: 1px solid #fff;
  }

  #videoGallery li {
position: relative;
  }
 span.nowPlaying {
position: absolute;
top: 0;
right: 0;
 }

Example of what it should look like: https://jsfiddle.net/zh61vq0z/6/

Answer 1

Just put a display: inline-block in his li. According to your code works perfectly.

#videoGallery ul {
  margin: 0;
  padding: 0;
}
#videoGallery span {
  display: block;
  background-color: #4682b4;
  color: #fff;
  font-family: sans-serif;
  cursor: pointer;
  padding: 4px 10px;
  border-bottom: 1px solid #fff;
}
#videoGallery li {
  list-style: none;
  position: relative;
  display: inline-block;
}
span.nowPlaying {
  position: absolute;
  top: 0;
  right: 0;
}

<div id="videoGallery">

  <ul>
    <li><span class="ytVideo" data-videoID="El3IZFGERbM">(Youtube 1)</span>
    </li>
    <li><span class="ytVideo" data-videoID="El3IZFGERbM">(Youtube 2)</span>
    </li>
    <li><span id="close">Fechar Tudo</span>
    </li>
  </ul>
</div>

Answer 2

You can use the property float:left, that will make your menus stand next to each other. To take this effect where you wish you can use the clear: left;

This tutorial can help you: insert link description here