Question

我是angularjs的新手，网络开发已经不是我的强项了，但我确实在寻找这个问题的答案而找不到任何东西。我在显示为内联块的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;
}

我没有在角度应用程序代码中进行格式化操作，所以除非另有要求，否则我会将其保留。有人可以帮我一把吗？

谢谢！

Answer 1

将overflow: hidden添加到locationCard CSS。

奇数对齐/边距/间距与ng-repeat和内联块div

1 个答案: