html - 影响样式的下划线

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 的评论作为答案:

Add vertical-align: top to .bucket. For inline-block the default styling is baseline, which makes the result like yours.