oliverbj
oliverbj

Reputation: 6052

Display ul next to each other

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

Answers (2)

ralph.m
ralph.m

Reputation: 14345

If you just float the uls, 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

Patrick Evans
Patrick Evans

Reputation: 42736

make one of your UL's classes to have a float:left; or display:inline-block; style

Upvotes: 1

Related Questions