UL显示：块 [英] UL display: block

问题描述

我不知道这是否是正确的方法这样做，但我试图对齐多个ULs在彼此旁边，应该在屏幕尺寸较小时删除第三个UL。我只需要帮助CSS，因为某种原因，他们保持堆叠在一起，即使我已经改变了宽度为50％。我已经创建了'@media'。

I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '@media'.

HTML：

<ul>
<li>Content 1</li>
</ul>
<ul>
<li>Content 2</li>
</ul>
<ul>
<li>Content 3</li>
</ul>

CSS：

ul { 
 display: block;
 width: 100%;
 float:left;
}

@media (max-width: 767px){
   ul { 
    width: 50%;
   }
}

推荐答案

不需要 @media 。

您需要使用 display：inline 。

请在这里查看： 示例

Have a look here: EXAMPLE

这篇关于UL显示：块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！