下划线影响样式

Question

我试图学习Backbone，似乎underscore.js影响了我的造型：

我的项目是trello克隆。一个项目有很多桶，有很多任务。 有些属性没有名称或任何任务，这似乎搞乱了样式。有没有人遇到过这个？

以下是模板代码：

<script type="text/template" id="project-show-template">
    <div>
        <h2>View <%%= project.name %>(<%%= project.token %>)</h2>
        <div class="buckets">
            <%% _.each(project.buckets, function(bucket) { %>  
              <%%= _.template($('#bucket-show-template').html())({bucket: bucket}) %>
            <%% }); %>
        </div>
    </div>
</script>


<script type="text/template" id="bucket-show-template">
    <div class="bucket bucket-<%%= bucket.id %>">
        <%% if (bucket.name) { %>
            <h3><%%= bucket.name %></h3>
        <%% } %>
        <ul class="tasks">
            <%% _.each(bucket.tasks, function(task) { %>  
              <%%= _.template($('#task-show-template').html())({task: task}) %>
            <%% }); %>
        </ul>
    </div>
</script>

<script type="text/template" id="task-show-template">
        <li><%%= task.name %></li>
</script>

是什么导致这种样式不一致？

编辑：CSS添加

.bucket {
    display: inline-block;
    min-width: 200px;
    min-height: 150px;
    padding: 5px;
    margin: 5px;
    background-color: #ddd;
    cursor: pointer;
}

Answer 1

添加@ Vucko的评论作为完整性的答案：

  

将vertical-align：top添加到.bucket。对于内联块，默认样式是基线，这使得结果与您的一样。