1

これが正しい方法かどうかはわかりませんが、多数の UL を並べて配置しようとしており、画面サイズが小さい場合は 3 番目の UL を削除する必要があります。すでに幅を 50% に変更しているにもかかわらず、何らかの理由で CSS が重なり合っているため、CSS のサポートが必要です。「@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%ます。そしてディスプレイを作る：インラインブロック

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 に答える