html - Make two elements inside <ul> tags responsive on the same line -
i know how make 2 div's inside tags responsive, @ same time elements have stay on same line. right right div going below first one. here jsfiddle example:
http://jsfiddle.net/vladicorp/vzssp/3/
the code:
<div id="design01"> <div id="titledesign01">title</div> <ul> <li> <div id="designphoto01"><img src="http://www.emocool.com/work/01.jpg" ></div> </li> <li> <div id="designphoto04"><img src="http://www.emocool.com/work/03.jpg" ></div> </li> </ul></div>
the css:
#design01 { display: block; position: relative; max-width: 100%; margin: 0 auto; float:left; } #design01 ul { float:left; overflow:hidden; max-width: 100%; height:100%; list-style:none; padding:0px; padding:0px; } #design01 ul li{ float:left; position:relative; padding:0px; } #titledesign01 { max-width: 100%; font: 18px/20px "helvbold", helvetica, arial, sans-serif; text-transform: uppercase; color:#fff; margin-left:20px; } #designphoto04 { display: block; max-width: 100%; } #designphoto04 img{ max-width: 100% } #designphoto01 { display: block; max-width: 100%; } #designphoto01 img{ max-width: 100% }
you close. need add css li's make work:
width:50%; margin:0;
these values can adjusted. basically, telling css let elements 50% of ul width. if set more this, wrap. alternately, can set 1 40% , other 60%, 2 values have add 100% (or less if add padding, margin, or border).
Comments
Post a Comment