UL顯示：塊

我不確定這是否是正確的方式來做到這一點，但我試圖將多個UL彼此對齊，並應在屏幕尺寸較小時放棄第三個UL。我只是需要CSS的幫助，因爲由於某些原因，即使我已經將寬度更改爲50％，它們仍然堆疊在一起。我已經創建了'@media'。UL顯示：塊

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%; 
    } 
}

來源

2013-10-04 Elmer

撥打的jsfiddle請 – Rich

嘗試'顯示：直列table' –

嘗試' @media屏幕和（最大寬度：767px）' – karthikr

您需要刪除display: block，並width: 100%。並顯示：inline-block的

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

由於製作寬度：100％會掩蓋整個寬度，你所得到的ULS一個到另一名

來源

2013-10-04 03:54:43

'float：left'取消行內塊行爲，將其更改爲'block'。 –

這是你所需要的。

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-04 03:57:48

你不需要@media。您需要在列表中使用display:inline。

看一看這裏：EXAMPLE

來源

2013-10-04 03:58:50 Thanos

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-04 04:02:45

回答

相關問題