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

我想让itens（班级）在同一行，你能帮助我吗？

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>

CSS类同一行

2 个答案: