CSS классы той же линии

Question

Я делаю меню CSS ... с классами Я хочу, чтобы меню было таким:

http://i.stack.imgur.com/oU9ii.png

Но меню выглядит так:

http://i.stack.imgur.com/nK0Jq.png

Это код, который я использую:

.deviantart {
    display:block; 
    margin:0% auto;
    width: 100px;
    height: 100px;
    display: block;
    background-image : url(images/social/deviantart.png);
    background-repeat: no-repeat;
    background-size:100%;
    -webkit-transition: -webkit-transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
}
a.deviantart:hover {
    -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}
a.twitter {
    display:block; 
    margin:10px auto;
    width: 100px;
    height: 100px;
    display: block;
    background-image : url(images/social/twitter.png);
    background-repeat: no-repeat;
    background-size:100%;
    -webkit-transition: -webkit-transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
}
a.twitter:hover {
    -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}

Я хочу сделать итэнс (классы) в одной строке, вы можете мне помочь?

Answer 1

Попробуйте

float: left;

или

display: inline-block

элементов (ящиков), которые вы хотите выстроить в линию.

Answer 2

CSS:

#left { background:black; width: 100px; height: 100px; float:left; margin-right:20px;}
#middle { background:black; width: 100px; height: 100px; float:left; margin-right:20px;}
#right { background:black; width: 100px; height: 100px; float:left;}

HTML:

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>