html - UL 显示 : block

Question

我不确定这是否是执行此操作的正确方法，但我正在尝试将多个 UL 彼此对齐，并且应该在屏幕尺寸较小时删除第三个 UL。我只需要 CSS 方面的帮助，因为出于某种原因，即使我已经将宽度更改为 50%，它们仍然相互堆叠。我已经创建了“@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%;
   }
}

Answer 1

您需要删除 display: block 和 width: 100%。并显示:inline-block

ul { 
 display: inline-block;
 float:left;
 overflow: auto;
}

因为设置 width: 100% 会覆盖整个宽度，所以你会一个一个地获取 uls