我正在尝试创建一个无序列表,其中三个列表项并排放置在页面上,每个列表项都有一个可以单击的按钮 - 然后会出现一条消息。我几乎已经完成了此设置,但我遇到了与显示消息的按钮相关的问题。
按下按钮时,整个列表项将移出行,所有三个列表项都会发生这种情况。 (请测试 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;
}
最佳答案
如果你只是将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;
}
关于javascript - javascript onclick 时防止列表元素移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38212713/