Le 31 août 2013 à 09:58, "John A. Johnson" <j...@coffeeonmars.com> a écrit :
> I have a 6-item menu which is inline at desktop sizes, but block at mobile
> sizes. it works great, but at mobile, I'd like to have 2 columns of 3 buttons
> to make better use of my vertical space. is there an easy way to do this?
> can it even be done with css?
>
> thank you!
>
> John
>
> existing desktop css:
>
> nav ul li{
> display:inline;
> line-height:50px;
> font-size:80%;
> margin:0 3% 0 3%;
> }
>
>
>
> existing mobile css:
>
> nav ul li{
> background-color:gray;
> border-radius:3px;
> display:block;
> width:97%;
> line-height:45px;
> font-size:100%;
> font-weight:700;
> margin:1% 0 0 0;
> padding:0 0 0 3%;
> }
Without seeing your html structure and the rest of your stylesheet:
nav ul li { display: inline-block; vertical-align: top; width 50%; /* rest of
styles */ }
PS - you could simplify that selector to: nav li {}
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
