html - 使用带有按钮的 HTML/CSS 排列列

Question

这是我当前的 HTML/CSS/JavaScript:http://jsfiddle.net/3EBVD/ .

具体来说，我关注的 CSS(尽管我猜问题可能出在其他地方):

#linkButtons {
    display: table-cell;
    padding-left:20px;
    padding-top:0px;
    padding-bottom:10px;
    padding-right:20px;
    vertical-align: middle;
    width: 50px;
    outline:2px solid black;
}
#defText {
    margin-right: 40px;
    display: table-cell;
    padding-right:10px;
    padding-left:0px;
    padding-top:30px;
    padding-bottom:30px;
    width: 45%;
    vertical-align: middle;
    border: 2px solid black;
}
#voteButtons {
    display: table-cell;
    padding:20px;
    padding-right:20px;
    width: 80px;
    vertical-align: middle;
    border: 2px solid black;
}

有两个盒子，第一个很完美，正是我需要的。第二个(带按钮的那个)排列不正确，我不明白为什么。

是的，我已经尝试过 float 属性，到目前为止它只会把一切搞砸......除非我做的事情完全错了。

非常感谢!

Answer 1

这是你想要的方式吗？我修复了一些 html 标签

<div id=voteButtons>
                            <button id=upvote onclick="modify_qty(1)">&#8593</button>
                            <p>
                                <input id="qty" value="0" readonly>%
                                <button id=comment>COM</button>
                            </p>
                            <button id=downvote onclick="modify_qty(0)">&#8595</button>
                        </div>
                        <div id="one"></div>

这是在第二个大纲 div 之外 http://jsfiddle.net/3EBVD/3/