Reputation: 6052
I have multiply UL lists, and I need them to be next to each other horizontal instead of vertical.
This is my css:
.tags:before,.tags:after{content:'';display:table}
.tags:after{clear:both}
.tags{margin-left:38%;}
.tags li{position:relative;float:left;margin:0 0 8px 12px;list-style-type: none;}
.tags li:active{margin-top:1px;margin-bottom:7px}
.tags li:after{content:'';z-index:2;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#eb6b22;border-radius:3px 0 0 3px;-webkit-box-shadow:inset 1px 0 #99400e;box-shadow:inset 1px 0 #99400e}
.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tags a{height:26px;line-height:23px;padding:0 9px 0 8px;font-size:12px;color:#555;text-decoration:none;text-shadow:0 1px white;background:#fafafa;border-width:1px 0 1px 1px;border-style:solid;border-color:#dadada #d2d2d2 #c5c5c5;border-radius:3px 0 0 3px;background-image:-webkit-linear-gradient(top,#fcfcfc,#f0f0f0);background-image:-moz-linear-gradient(top,#fcfcfc,#f0f0f0);background-image:-o-linear-gradient(top,#fcfcfc,#f0f0f0);background-image:linear-gradient(to bottom,#fcfcfc,#f0f0f0);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.7),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.7),0 1px 2px rgba(0,0,0,0.05)}
.tags a:hover span{padding:0 7px 0 6px;max-width:40px;-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),1px 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),1px 1px 2px rgba(0,0,0,0.2)}
.tags span{position:absolute;top:1px;left:100%;z-index:2;overflow:hidden;max-width:0;height:24px;line-height:21px;padding:0 0 0 2px;color:white;text-shadow:0 -1px rgba(0,0,0,0.3);background:#eb6b22;border:1px solid;border-color:#d15813 #c85412 #bf5011;border-radius:0 2px 2px 0;opacity:.95;background-image:-webkit-linear-gradient(top,#ed7b39,#df5e14);background-image:-moz-linear-gradient(top,#ed7b39,#df5e14);background-image:-o-linear-gradient(top,#ed7b39,#df5e14);background-image:linear-gradient(to bottom,#ed7b39,#df5e14);-webkit-transition:.3s ease-out;-moz-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out;-webkit-transition-property:padding,max-width;-moz-transition-property:padding,max-width;-o-transition-property:padding,max-width;transition-property:padding,max-width}
And my HTML:
<ul class='tags greentag'><li><a href='javascript:void(0)' onclick="document.rent.refs.value='20';document.rent.submit(); return false;" id='refpack20'>20 <span>Rent</span></a></li></ul>
<ul class='tags greentag'><li><a href='javascript:void(0)' onclick="document.rent.refs.value='20';document.rent.submit(); return false;" id='refpack20'>20 <span>Rent</span></a></li></ul>
<ul class='tags greentag'><li><a href='javascript:void(0)' onclick="document.rent.refs.value='20';document.rent.submit(); return false;" id='refpack20'>20 <span>Rent</span></a></li></ul>
Currently each UL is placed vertical, and not horizontal as I want it to be. How can I obtain this?
Upvotes: 0
Views: 1775
Reputation: 14345
If you just float the ul
s, the result won't be too pretty, due to the huge left margin on each one. Either remove or greatly reduce the left margin to ensure that they will all sit site by side:
.tags {
margin-left: 20%; /* play with this until happy */
float: left;
padding: 0;
}
Upvotes: 0
Reputation: 42736
make one of your UL's classes to have a float:left;
or display:inline-block;
style
Upvotes: 1