ng-repeat 和 inline-block div 的奇数对齐/边距/间距答案

【问题标题】：Odd alignment/margins/spacing with ng-repeat and inline-block divsng-repeat 和 inline-block div 的奇数对齐/边距/间距
【发布时间】：2014-02-20 14:44:16
【问题描述】：

我是 angularjs 新手，Web 开发已经不是我的强项，但我确实搜索了这个问题的答案，但找不到任何东西。我在显示为内联块的 div 上使用 ng-repeat。我得到奇怪的顶部和底部间距。我这里有一个截图：https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png。

这是基本的 html：

<html>
<head>
    <title>Knock Admin V1.0</title>
    <script type="text/javascript" src="/assets/js/angular.js"></script>
    <script type="text/javascript" src="/assets/js/angular-route.js"></script>
    <script type="text/javascript" src="/assets/ng/admin/app.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>

<body ng-app="admin">
    <div id="sidebar">
        Welcome
        <br><a href="/admin/logout">Logout</a>
    </div>

    <div id="view">
        <div ng-view></div>
    </div>
</body>

</html>

还有视图模板：

<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />

<div id="locationCardCollection">
    <div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
        {{ loc.chain.name }} - {{ loc.name }} <br>
        {{ loc.message }}
    </div>
</div>

最后，CSS：

body, div {
    margin: 0;
    padding: 0;
}

body{
    background-color: #E4E4E4;
}

#view {
    padding: 10px;
    margin-left: 200px;
    overflow: hidden;
}

#sidebar {
    position: fixed;
    height: 100%;
    width: 200px;
    background-color: #555555;
    color: #FFFFFF;
}

div.locationCard {
    background: #FFFFFF;
    display: inline-block;
    height: 400px;
    width: 300px;
    margin: 10px;
    -webkit-box-shadow: 5px 5px 10px 1px #404040;
    box-shadow: 5px 5px 10px 1px #404040;
}

div.locationCard.hover {
    background-color: #FF0000;
}

我没有对 Angular 应用程序代码中的格式进行任何棘手的操作，因此除非另有要求，否则我将忽略它。有人可以帮我看看吗？

谢谢！

【问题讨论】：

如果您设置了一个 plnkr.co 或 jsfiddle.net 页面，其中包含重现问题的示例代码，我可以看看。
我正在这样做。看来，如果我删除 div 中的 {{ loc.message }} 内容，问题就消失了。超出 div 边界的内容是否存在问题？
如果将overflow: hidden 添加到locationCard 类会发生什么？
添加溢出：隐藏似乎可以解决它。不过这很奇怪，因为内容似乎可以自动换行。

标签： angularjs angularjs-ng-repeat css ng-repeat

【解决方案1】：

在 locationCard CSS 中添加了overflow: hidden。

【讨论】：