CSS 并排对齐 UL

Question

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

加 1 加 2

加 3 加 4 加 5

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

这是我的 css 和 HTML，包括我一直在使用的 fiddle。 ul,ol { 列表样式: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>

Fiddle: http://jsfiddle.net/23y6o7dj/

感谢您的帮助！我确定它很明显：/

Answer 1

您只需要将 width:100% 的值更改为 width:auto 并从 .product-view .add-to-links CSS 样式中删除 padding: 15px 0 5px; 属性：

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

这是the working Fiddle。

CSS 并排对齐 UL

CSS align UL side by side

html

css

html-lists