jquery - 保持 html 表中的复选框 algined

Question

考虑一个简单的居中对齐表格，带有一些复选框

点击一个按钮会自动选中一些复选框，并在复选框旁边添加一些动态文本。现在复选框不再对齐，表格看起来很奇怪。

$('#add').click(function () {
    $('#bike').attr('checked','checked').after("<span>Good Selection</span>");
    $('#airplean').attr('checked','checked').after("<span>Woow</span>");

});

http://jsfiddle.net/m9884jy7/1/

在纯 html 中，这可以通过添加额外的列来修复....

但是请考虑我已经简化了示例，我不能添加列:(

我正在寻找 css 解决方案，或者可能是一个可以使用的提示。此外，因为我有复选框的 ID，所以我可以添加任何有助于纠正对齐的 html DOM。

Answer 1

给你:http://jsfiddle.net/m9884jy7/2/

你应该做的第一件事是在每个复选框附近添加一个跨度，你有 - 所以在汽车附近添加一个空的:

$('#car').attr('checked','checked').after("<span></span>");

然后添加此 css，将默认宽度设置为跨度:

td span{
    display: inline-block;
    text-align: left;
    width: 200px;
    padding-left:3px;
}