在我的应用程序中，我遇到了一个问题，并通过以下演示重现了该问题: http://plnkr.co/edit/ftZSl0Cv6GY7WbaMMlhv?p=preview
我用了ng-repeat在 Angular 生成几个<li> <ul> 内的元素元素。在每个<li>结构如下:
<ul class="articlelist">
<li class="articleitem" ng-repeat="eacharticle in main.articlelist">
<p class="article-title ellipsis-threelines-new">{{eacharticle.title}}</p>
<img class="lead-image" src="http://placekitten.com/g/200/300">
<div><a>www.abc.com</a></div>
</li>
</ul>
有一个p , img和 div子级别中的元素
以及 li 的样式元素如下，只需将它们设置为inline-block元素，因此它们将水平堆叠。
.articlelist {
list-style:none;
}
.articleitem {
display: inline-block;
width:25%;
background: white;
border: 1px solid rgb(220,220,224);
height:280px;
}
.lead-image {
width:100%;
margin: 0 0 10px 0;
height: 50%;
}
.article-title {
font-size:19px;
color: #313131;
padding:10px;
font-style: normal;
font-weight: 600;
font-family: serif;
margin: 0;
word-wrap: break-word;
}
我为每个 li 设置固定高度元素到 280px。以及p的内容一个一个是各种各样的。所以 p 的高度也不同。最终结果如下:
这正是我在实际应用中得到的。我很困惑为什么元素以这种方式对齐。我想要的效果是每个 li以相同的高度堆叠在同一水平面上。子级元素的相对位置可以根据内容的长度而变化。
最佳答案
在 li 上设置 vertical-align:top 因为 inline-block 默认是 vertical-align: baseline
var app = angular.module('myapp', []);
app.controller('MainCtrl', function() {
var self = this;
this.articlelist = [];
this.addItem = function() {
for (var i = 1; i <= 3; i++) {
var temp = {};
temp.title = self.generateTitle(i);
self.articlelist.push(temp);
}
};
this.generateTitle = function(counter) {
var title = "";
for (var i = 0; i < counter * 5; i++) {
title = title + "A";
}
return title;
};
});/* Put your css in here */
.articlelist {
list-style: none;
}
.articleitem {
display: inline-block;
vertical-align: top;
width: 25%;
background: white;
border: 1px solid rgb(220, 220, 224);
height: 280px;
}
.lead-image {
width: 100%;
margin: 0 0 10px 0;
height: 50%;
}
.article-title {
font-size: 19px;
color: #313131;
padding: 10px;
font-style: normal;
font-weight: 600;
font-family: serif;
margin: 0;
word-wrap: break-word;
}<html ng-app="myapp">
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
<body ng-controller="MainCtrl as main">
<button ng-click="main.addItem()">Add New One</button>
<ul class="articlelist">
<li class="articleitem" ng-repeat="eacharticle in main.articlelist">
<p class="article-title ellipsis-threelines-new">{{eacharticle.title}}</p>
<img class="lead-image" src="http://placekitten.com/g/200/300">
<div><a>www.abc.com</a></div>
</li>
</ul>
</body>
</html>关于html - css: li 元素在水平方向的奇怪和困惑的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41754723/