Question

我有两个无序列表，其元素并排。我很难弄清楚如何将这些列表并排放置。现在它看起来像：

添加1添加2

添加3添加4添加5

我需要它看起来像这样：添加1添加2添加3添加4添加5

这是我的CSS和HTML，包括我一直在使用的小提琴。 ul，ol {list-style：none; }

.product-view .sharing-links a {
  background-image: url(../images/icon_sprite.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.product-essential {margin-bottom:0px; padding-bottom:25px;}
.product-view .product-essential .product-shop .nobr {margin-bottom:5px; display:inline-block;}

.product-view { margin-bottom:20px;}
.product-view .product-shop {float:right;width:100%;}

.add-to-box { background-color: #F4F4F4; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; }
.add-to-box .add-to-links  { float: left; }

.product-view .add-to-links { margin-left:25px !important; padding: 15px 0 5px;  border-top: 1px solid #DBDBDB; width: 100%; float: left; }
.product-view .sharing-links { float: left; }

.product-view .add-to-links li {margin-bottom: 8px; display:inline-block; }
.product-view .add-to-links li a:before { font-size: 14px; margin-right: 15px; color:#2E8AB8; }
.product-view .add-to-links li .link-wishlist:before { }
.product-view .add-to-links li .link-compare:before { }


.product-view  .sharing-links:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .sharing-links li {
  float: left;
  padding: 0px 7px 7px;
}
.product-view .sharing-links a {
  text-indent: -9999px;
  display: block;
  width: 26px;
  height: 26px;
}
.product-view  .sharing-links a:hover {
  opacity: 0.8;
}
.product-view .sharing-links a.link-email-friend {
  background-position: 0px -322px;
}
.product-view  .sharing-links a.link-facebook {
  background-position: 0px -425px;
}
.product-view  .sharing-links a.link-twitter {
  background-position: 0px -372px;
}

<div class="product-view">
    <div class="product-essential">
        <div class="product-shop">
            <div class="add-to-box">
                <ul class="add-to-links">
                    <li>Add 1</li>
                    <li>Add 2</li>
                </ul>

                <ul class="sharing-links">
                    <li>Add 3</li>
                    <li>Add 4</li>
                    <li>Add 5</li>
                </ul>
            </div>
        </div>
    </div>
</div>

小提琴： http://jsfiddle.net/23y6o7dj/

感谢您的帮助！我确定它显而易见：/

Answer 1

您只需将width:100%的值更改为width:auto，然后从padding: 15px 0 5px; CSS样式中移除.product-view .add-to-links proprety：

.product-view .add-to-links { 
     margin-left:25px !important;  
     border-top: 1px solid #DBDBDB; 
     width: auto; 
     float: left; 
}

这是the working Fiddle。

CSS并排对齐UL

1 个答案: