0

我有多个 UL 列表，我需要它们水平而不是垂直相邻。

这是我的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}

还有我的 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>

目前每个 UL 都是垂直放置的，而不是我想要的水平放置。我怎样才能得到这个？

4

2 回答 2

1

使您的 UL 课程之一具有float:left;ordisplay:inline-block;风格

于 2013-06-02T13:29:42.667 回答
0

如果你只是浮动uls，结果不会太漂亮，因为每个人都有巨大的左边距。删除或大大减少左边距以确保它们都将并排放置：

.tags {
    margin-left: 20%;  /* play with this until happy */
    float: left;
    padding: 0;
}
于 2013-06-02T14:25:38.860 回答