Html css：li元素在水平方向上奇怪而混乱的布局

在我的应用程序中，我遇到了一个问题，并通过以下演示复制了它：

我在angular中使用了

ng repeat

，在

元素中生成了几个

元素。在每个

中，结构如下：

<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>

我将每个

li

元素的固定高度设置为280px。而

p

的内容也各不相同。所以p的高度也不同。最终结果如下：

---

这正是我在实际应用程序中得到的。我对元素为何以这种方式对齐感到非常困惑。我想要的效果是每个

li

都以相同的高度堆叠在同一水平面上。子级别元素的相对位置可以根据内容的长度而更改。

在

li

上设置

垂直对齐：顶部

，因为

内联块

默认为

垂直对齐：基线

var-app=angular.module（'myapp'，[]）；
应用程序控制器（'MainCtrl'，函数（）{
var self=这个；
this.articlelist=[]；
this.addItem=函数（）{
对于（var i=1；i
.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;
}