javascript - javascript onclick 时防止列表元素移动

Question

我正在尝试创建一个无序列表，其中三个列表项并排放置在页面上，每个列表项都有一个可以单击的按钮 - 然后会出现一条消息。我几乎已经完成了此设置，但我遇到了与显示消息的按钮相关的问题。

按下按钮时，整个列表项将移出行，所有三个列表项都会发生这种情况。 (请测试 jsfiddle 以解决此问题)

如何防止这种情况发生并让列表项在单击时不改变其位置？

使用的CSS:

.container {
  margin: 0 auto;
}

div.product {
    color: #5a5b5d;
    text-transform: uppercase;
    font-family: 'Lato', Helvetica, sans-serif;     
}

ul.products {
    text-align: center; 
    border: 2px solid red;
    position: relative;
}


.products li {
    float: none;
    margin: 0px 10px;  
    padding: 45px 5px;
    min-width: 50px;
    height: 400px; 
    position: relative;
    border: 2px solid #427cb7;
    background-color: #c6d7e9;
    display: inline-block;
    text-align: center;
}

.products ul li h3 {
    text-align: center;
    color: #5a5b5d;
      font-family: 'Lato', Helvetica, sans-serif;    
      text-transform: uppercase;  
      padding-bottom: 20px;
      font-size: 22px;  
      text-decoration: underline;
}

Answer 1

如果你只是将overflow:hidden添加到.products li中，它应该可以解决问题!唯一的问题是该框的高度为 400 像素并且不会增长，因此如果您的消息真的很长，您需要增加框的高度。

.products li {
    overflow: hidden;
    float: none;
    margin: 0px 10px;  
    padding: 45px 5px;
    min-width: 50px;
    height: 400px; 
    position: relative;
    border: 2px solid #427cb7;
    background-color: #c6d7e9;
    display: inline-block;
    text-align: center;
}