Question

我的HTML：

 <ul class="down_rectangles">
   <li >       
     <div class="keimeno">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis  
       consequat tellus consectetur adipiscing elit. Donec
      </div>

  </li>
  <li >
     <div class="keimeno">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis  
       consequat tellus
      </div> 

  </li>
</ul>

CSS如下：

.down_rectangles{   
list-style: none;
margin-top:0px; 
padding:0;  
}
.down_rectangles li {
height: 250px;
width: 265px;
background-color: #FFF;
display: inline-block;
margin-right:15px;
}
.down_rectangles>li:last-child {
margin-right:0;               
}
.keimeno{
color: #626262;
font-size: 12px;
margin: 20px;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;
}

如果两个li里面的文字相同，那么它们彼此相邻就好了。每次我试图更改第一个li内的文本时，第二个li会向下移动一点并失去其初始位置。为什么会这样？非常感谢你

Answer 1

由于您使用的是display: inline-block;，因此默认情况下元素与baseline对齐

因此，您需要将vertical-align: top;用于.down_rectangles

.down_rectangles li {
    height: 250px;
    width: 265px;
    background-color: #FFF;
    display: inline-block;
    margin-right:15px;
    vertical-align: top;
}

Demo

~~Demo 2~~ （如果未使用，则设置为基线vertical-align: top;）

Answer 2

您需要为vertical-align:top元素设置li，因为它们是inline-blocks

关于codepen的示例：http://codepen.io/anon/pen/vhJpG

Answer 3

试试这个

.down_rectangles li{float :left;}

李失去了自己的位置......

3 个答案: