顯示ul彼此相鄰

我有多個UL列表，我需要它們彼此相鄰而不是垂直。顯示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置於垂直的，因爲我想它是不是水平。我怎樣才能獲得這個？

來源

2013-06-02 oliverbj

'float：left;'？ – 11684

讓您的UL的一個類有float:left;或display:inline-block;風格

來源

2013-06-02 13:29:42

'UL' _class_？你的意思是標籤或元素？ +1雖然。 – 11684

是類，他的每個UL對象都有2個''tags'和'greentag'類，所以他所需要做的就是編輯任何一個類並完成。 –

@ 11684'ul'類是'標籤greentag'。其中之一是要延長... – A4L

如果你只是浮在ul S，結果不會是太漂亮了，由於對每一個巨大的左邊距。要麼刪除或大大減少左邊距，以確保它們將全部坐在一起：

.tags { 
    margin-left: 20%; /* play with this until happy */ 
    float: left; 
    padding: 0; 
}

來源

2013-06-02 14:25:38

顯示ul彼此相鄰

回答

相關問題