css - Align <ul> <li> elements to the left -
i'm having trouble aligning li elements left on tabs, centered. wondering if me out.
i've tried few things end breaking code.
also, plus, effects fadein on divs don't seem work on opera , firefox.
here's jsfiddle: http://jsfiddle.net/guisasso/6f6py/
css
.tabs { border-bottom:3px #f2f2f2 solid; } .tabs li { list-style:none; display:inline; color:#08c; } .tabs { padding:5px 20px; display:inline-block; background:#ffffff; text-decoration:none; color:#08c; top: 3px; font-size: 22px; line-height: 140%; padding-top: 10px; background: #ffffff; box-sizing: border-box; position: relative; border-radius: 4px 4px 0 0; margin-bottom:3px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .tabs a.active { background: #ffffff; border-bottom:3px orange solid; color:#000000; top:0px; } .tabs a:hover { background: #f2f2f2; top: 0px; border-bottom:3px orange solid; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } #tab1, #tab2, #tab3, #tab4 { animation: fadein 1s; -moz-animation: fadein 1s; /* firefox */ -webkit-animation: fadein 1s; /* safari , chrome */ -o-animation: fadein 1s; /* opera */ } @keyframes fadein { { opacity:0; } { opacity:1; } } @-moz-keyframes fadein { /* firefox */ { opacity:0; } { opacity:1; } } @-webkit-keyframes fadein { /* safari , chrome */ { opacity:0; } { opacity:1; } } @-o-keyframes fadein { /* opera */ { opacity:0; } { opacity: 1; } }
html
<ul class="tabs"> <li><a href='#tab1'>tab #1</a></li> <li><a href='#tab2'>tab #2</a></li> <li><a href='#tab3'>tab #3</a></li> <li><a href='#tab4'>tab #4</a></li> </ul> <div id="tab1">111111111111111 11111111111111111 1111111111111111111 1111111111111</div> <div id="tab2">222222222222222 22222222222222222 2222222222222222222 2222222222222</div> <div id="tab3">333333333333333 33333333333333333 3333333333333333333 3333333333333</div> <div id="tab4">444444444444444 44444444444444444 4444444444444444444 4444444444444</div>
thanks
add .tabs
:
padding-left: 0;
change in .tabs a
:
padding: 5px 20px;
to
padding: 5px 20px 5px 0;
it doesn't lefter that.
fiddle: http://jsfiddle.net/prl5h/
Comments
Post a Comment