1

我不确定这是否是正确的方法，但我正在尝试将多个 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%;
   }
}
4

4 回答 4

3

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

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

由于制作 width: 100% 将覆盖整个宽度，因此您将 uls 一个一个向下

于 2013-10-04T03:54:43.047 回答
2

你不需要@media.

你需要display:inline在你的清单上使用。

看看这里： 示例

于 2013-10-04T03:58:50.677 回答
1

这就是你所需要的。

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

尝试更改窗口大小。

于 2013-10-04T03:57:48.897 回答
0

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>
于 2013-10-04T04:02:45.377 回答