Align menu with CSS

Question

Align menu with CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have this menu that currently has two IDs that can 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 align them side by side. instead of one below the other. it's 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 how it should look: link

html css

asked by anonymous 20.12.2015 / 02:34

2 answers

Change whether or not item appears in p: Datatable How to get data received in JSON and store in a class

score 1 · Answer 1

Just put a display: inline-block into your li . According to your code it 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>

score 0 · Answer 2

You can use the float:left property, which will make your menus side by side. To take this effect wherever you want you can use clear: left;

This tutorial can help you: insert the link description here