Question

我遇到了有选项和答案功能的问题。如果我选择一个包含许多按钮输出的选项，例如，如果我选择选项20，它将显示20个按钮，我得到的问题我的内容会下降一点，因为它会在表格单元格增加时创建一个空格。我的问题是如何保持内容在顶部附近对齐，如果表格单元格略微增加则不会向下移动？

它的外观截图：

enter image description here

以下是我尝试但未奏效的内容：

.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

为<td>元素试用此CSS：

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

如何保持内容在顶部对齐

1 个答案: