How to make the <li> items next to each other? - html

Question

For hours, I've been trying to put the li lists next to each other, but still couldn't make it.
JsFiddle: https://jsfiddle.net/rsp3gsg3/
body {
background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg");
background-attachment: fixed;
}
img {
box-shadow: 0px 3px 12px 2px #000;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
#menu {
width: 200px;
height: 200px;
background: white;
box-shadow: 0px 3px 12px 2px #000;
}
.ulinlineblock {
display: inline-block;
list-style-type: none;
}
<div align="center">
<img src="Header.png" />
<div id="menu">
<ul class="ulinlineblock">
<li>Home</li>
<li>Blog</li>
<li>Wiki</li>
<li>Trivia</li>
</ul>
</div>
</div>

Answer 1

You should set the li to inline block.
.ulinlineblock {
text-align: center;
list-style: none;
padding: 0;
}
.ulinlineblock li {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/rsp3gsg3/4/
body {
background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg");
background-attachment: fixed;
}
img {
box-shadow: 0px 3px 12px 2px #000;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
#menu {
width: 200px;
height: 200px;
background: white;
box-shadow: 0px 3px 12px 2px #000;
}
.ulinlineblock {
text-align: center;
list-style: none;
padding: 0;
}
.ulinlineblock li {
display: inline-block;
vertical-align: top;
}
<div align="center">
<img src="Header.png" />
<div id="menu">
<ul class="ulinlineblock">
<li>Home</li>
<li>Blog</li>
<li>Wiki</li>
<li>Trivia</li>
</ul>
</div>
</div>