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%。并进行显示：内联块

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

由于宽度：100％会覆盖整个宽度，因此你可以将uls推向另一个

Answer 2

您不需要@media。

您需要在列表中使用display:inline。

请点击此处： EXAMPLE

Answer 3

这就是你所需要的一切。

<强> HTML

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

<强> CSS

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

你可以在这里看到它：http://codepen.io/anon/pen/GwBak

尝试更改窗口大小。

Answer 4

CSS代码

{
        display: block;
        color: #FFF;
        background-color: #036;
        width: 9em;
        padding: 3px 12px 3px 8px;
        text-decoration: none;
        border-bottom: 1px solid #fff;
        font-weight: bold;
        }

        #navcontainer a:hover
        {
        background-color: #369;
        color: #FFF;
        }

在html代码中

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
<li><a href="#">Cheese</a>
   <ul>
   <li><a href="#">Smelly</a></li>
   <li><a href="#">Extra smelly</a></li>
   </ul>
</li>
</ul>
</div>

UL显示：块

4 个答案: