CSS并排UL

Question

我有两个无序列表，它们的元素是并排的。我很难弄清楚如何把这些清单并排放。现在看来：

加1加2

加3加4加5

我需要它看起来如下:加1加2加3加4加5

这是我的css和HTML，包括我一直在使用的小提琴。ul，ol {列表样式:无；}

.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，并从.product-view .add-to-links CSS样式中删除padding: 15px 0 5px; proprety：

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

我是the working Fiddle。