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 のクラスの 1 つをfloat:left;ordisplay:inline-block;スタイルにする

于 2013-06-02T13:29:42.667 に答える
0

sだけをフロートするulと、それぞれの左マージンが大きいため、結果はあまりきれいになりません。左余白を削除するか大幅に減らして、すべてが横並びに配置されるようにします。

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