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

如果你只是添加溢出：隐藏到.products li它应该做的伎俩！只有捕获的是盒子将是400px高并且不会增长，所以如果你的消息很长，你需要增加盒子的高度。

.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;
}

Answer 2

将ERROR [Instance: i-913b2004] Command failed on instance. Return code: 1 Output: 'Failed to start ECS task after retrying 2 times.'添加到您的li CSS规则中：

vertical-align:top

<强> jsFiddle example

当javascript onclick时阻止列表元素移动

2 个答案: