小编Kim*_*son的帖子

我正在创建一个CSS按钮,我正在尝试制作一个onclick效果:当用户点击按钮时,它会按下按钮文本1px.我的问题在于它正在推动按钮的整个底部.你会怎么做？

<div class="one">
    <p><a id="button" href=#>Button</a></p>
</div>

这是CSS:

#button {
    display: block;
    width:150px;
    margin:10px auto;
    padding:7px 13px;
    text-align:center;
    background:#a2bb33;
    font-size:20px;
    font-family: 'Arial', sans-serif;
    color:#ffffff;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}

#button:active {
    vertical-align: top;
    padding-top: 8px;
}

.one a {
    text-decoration: none;
}

你能解释一下为什么这 4 个 div 不相邻吗？有 4 个 div，我将它们的宽度设置为 25%，因此它们填满了整个页面，而 1 个 div 被推到其他 div 下方。我必须将宽度设置为 24% 才能让它们并排站立。怎么来的？在我的书中 4x25% = 100%。

http://jsfiddle.net/cm2K6/

.four {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}