0

Possuo esse menu que no momento tem duas ID que podem ser mais.

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

Como podem ver existe duas ID do youtube nelas, gostaria de alinhar elas uma ao lado da outra. ao inves de uma abaixo da outra. é um menu clicavel.

css do menu

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

Exemplo de como deve ficar: https://jsfiddle.net/zh61vq0z/6/

1

2 Respostas 2

1

Basta colocar um display: inline-block em seu li. De acordo com seu código funciona perfeitamente.

#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>

0

Você pode usar a propriedade float:left, que fará com que seus menus fiquem um ao lado do outro. Para tirar esse efeito onde desejar pode usar o clear: left;

Este tutorial pode lhe ajudar: inserir a descrição do link aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .