Question

在css代码中使用位置标记并不会对每个项目产生影响。

以下是代码：

HTML：

<div id="headerbuttons"><p>HOME</p></div>
<div id="headerbuttons"><p>DATABASE</p></div>
<div id="headerbuttons"><p>HOW TO INSTALL</p></div>
<div id="headerbuttons"><p>OTHER SOLUTIONS</p></div>

CSS：

#headerbuttons {
    position: absolute;
    padding: 5px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}
#headerbuttons:hover {
    -moz-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

的jsfiddle： http://jsfiddle.net/T8pUR/

Answer 1

删除position: absolute。

如果您想让它们并排显示，请添加display:inline-block;

Answer 2

也许这是解决您问题的方法：http://jsfiddle.net/VGP4K/

我基本上已从您的代码中删除了position: absolute，并将其替换为float: left。此外，我删除了ID代码，并将其替换为class代码。

请记住，ID在HTML中应该是唯一的。如果要应用重复的样式模式，请使用class。

更新以帮助您进行居中：http://jsfiddle.net/VGP4K/2/

Answer 3

我相信你想做的就是把它们放在一起。

使用position:absolute有效地将它们从文档流中删除。因此，它们每个占据0个空间，浏览器愉快地覆盖它们。

要解决此问题，请移除position:absolute并考虑使用float:left。

之类的内容

我更新了fiddle以展示它。

文字不会留在自己的空间＆＃34;？

3 个答案: