html - 如何保持内容在顶部对齐

Question

我的选项和答案功能有问题。如果我选择一个包含许多按钮输出的选项，例如如果我选择选项 20，它将显示 20 个按钮，我遇到的问题是我的内容会下降一点，因为它会在表格单元格增加时创建一个空间。我的问题很简单，如果表格单元格增加一点，我怎样才能使内容保持在足够接近顶部的位置而不向下移动？

它的外观截图：

以下是我尝试但没有奏效的方法：

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

以下是表格：

var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");

更新：

 var $options = $("<table class='option'><tbody><tr><td class='opt'>1. Option Type:</td></tr></tbody></table>");
    var $noofanswers = $("<table class='noofanswers'><tbody><tr><td class='noofans'>2. Number of Answers:</td></tr></tbody></table>");
    var $answer = $("<table class='answer'><tbody><tr><td class='ans'>3. Answer:</td></tr></tbody></table>");


    var $this, i=0, $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if(i%6 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
        $newBtn.appendTo($cell);

        i++;
    });

CSS：

td.opt{
    vertical-align:top;
    padding-top:1em;
}

td.noofans{
    vertical-align:top;
}

td.ans{
    vertical-align:top;
    padding-bottom:1em;

}

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

Answer 1

试试这个 CSS<td>元素：

td {
  vertical-align: top;
}

这里有更多细节。整个 CSS 应该如下所示：

* {
  margin: 0; padding: 0;
}

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
}

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

这是 PHP 代码，其中包含要添加cellpadding和添加cellspacing到<table>标签的编辑：

var $options = $("<table class='option' cellpadding='0' cellspacing='0'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers' cellpadding='0' cellspacing='0'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer' cellpadding='0' cellspacing='0'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");