UL display: block

问题:

I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '@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%;    } } 

回答1:

You need to remove the display: block, and width: 100%. And make display: inline-block

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

Since making width: 100% will cover up the whole width, you are getting the uls one down another

回答2:

You don't need the @media.

You need to use display:inline on your lists.

Have a look here: EXAMPLE

回答3:

This is all you need.

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

You can see it over here : http://codepen.io/anon/pen/GwBak

Try changing the window size .

回答4:

CSS code

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

In html code

<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 display: block