当我打开另一个li元素时，如何避免li元素下降

因此，我列出了包含一些元素的列表。问题是，当我在浏览器中打开其中一个li元素时，其他li元素也下降了。这是一个照片，你了解它当我打开另一个li元素时，如何避免li元素下降

HTML：

<ul class="gadgets-list"> 
<li class="gadget"><img src="iconmonstr-keyboard-2-240.png" class="image">Keyboards<span class="caret"></span></a> 
<p class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</li> 
<li class="gadget"><img class="image" src="iconmonstr-mouse-8-240.png">Mouses<span class="caret"></span></a></li> 
<li class="gadget"><img class="image" src="iconmonstr-headphones-1-240.png">Headsets<span class="caret"></span></a></li> 
<li class="gadget"><img class="image" src="iconmonstr-computer-1-240.png">Monitors<span class="caret"></span></a></li> 
<li class="gadge"><img class="image" src="iconmonstr-cpu-1-240.png">Other components<span class="caret"></span></a></li>

CSS：

.gadgets-list { 
    background-color: white; 
    display: inline-block; 
    word-spacing: 50px; 
    width: 100%; 
} 
.item { 
    word-spacing: normal; 
} 
.gadge { 
    list-style: none; 
    word-spacing: normal; 
    display: inline-block; 
} 
p { 
    width: 450px 
}

来源

2016-08-20 Fjoni Yzeiri

尝试将其更改为display：block – Bisquitue

将vertical-align: top;添加到您的gadget中，因为li是内联块元素，并且它的工作状况都很好。

请让我知道您的反馈。谢谢！

PS：错字的小工具太... :)

.gadgets-list { 
 
    background-color: white; 
 
    display: inline-block; 
 
    word-spacing: 50px; 
 
    width: 100%; 
 
} 
 
.item { 
 
    word-spacing: normal; 
 
} 
 
.gadget { 
 
    list-style: none; 
 
    word-spacing: normal; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
p { 
 
    width: 450px 
 
}

<ul class="gadgets-list"> 
 
    <li class="gadget"> 
 
    <img src="iconmonstr-keyboard-2-240.png" class="image">Keyboards<span class="caret"></span> 
 
    </a> 
 
    <p class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </li> 
 
    <li class="gadget"> 
 
    <img class="image" src="iconmonstr-mouse-8-240.png">Mouses<span class="caret"></span> 
 
    </a> 
 
    </li> 
 
    <li class="gadget"> 
 
    <img class="image" src="iconmonstr-headphones-1-240.png">Headsets<span class="caret"></span> 
 
    </a> 
 
    </li> 
 
    <li class="gadget"> 
 
    <img class="image" src="iconmonstr-computer-1-240.png">Monitors<span class="caret"></span> 
 
    </a> 
 
    </li> 
 
    <li class="gadget"> 
 
    <img class="image" src="iconmonstr-cpu-1-240.png">Other components<span class="caret"></span> 
 
    </a> 
 
    </li>

来源

2016-08-20 10:17:50 kukkuz

有错字在你的CSS其.gadget不.gadge

View this jsbin

来源

2016-08-20 10:00:37 codeninja93

在HTML代码仔细观察的最后一行 –

肯定的，但它的也是一个列表项，所以类名称应该是'.gadget'并让你的'.item {display：table}' – codeninja93

当我打开另一个li元素时，如何避免li元素下降

回答

相关问题