Question

我有一个全宽div（#instagram），其中包含一个无序的图像列表（lis的数量不同）。我希望ul（以及它的子节点）在div内部居中并向两个方向展开而不包裹到下一行。我在下面列出了一个图表。我如何以敏感的方式实现这一点？

<div id = "instagram">
  <ul class="photos">
      <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
  </ul>
</div>

enter image description here

更新：我意识到我的图表看起来有点像旋转木马，但这不是我想要的。我不需要任何“分页”功能。此外，我希望像我所示，在边缘切断图像。

更新＃2 这是一个起始的jsfiddle - http://jsfiddle.net/MULCU/

Answer 1

我尝试了white-space：nowrap属性，这就是我得到的。我限制了整个事物的最大宽度，所以你必须摆弄屏幕尺寸才能看到“响应性”。

#instagram {
    overflow:hidden;
    width:100%;
    background-color:red;
    padding:10px 0;
    max-width:400px;
}

.photos {
    background-color:orange;
    height:50px;
    padding:10px 0;
    position:relative;
    white-space:nowrap;
}

.photos li {
    width:50px;
    height:50px;
    display:inline-block;
    list-style:none;
    background-color:yellow;
    margin-right:10px;
}

C

<div id = "instagram">
    <ul class = "photos">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

JSFiddle

Answer 2

如果你添加一个额外的包装，你可以将图像 和的中心从多余的那边裁剪：

#instagram {
    position:relative;
    overflow:hidden;
    background-color:blue;
    padding:20px 10px;
    text-align:center;
}
#instagram .bounds {
    width:2000%;
    padding-left:50%;
    text-align:center;
}
#instagram ul {
    list-style-type:none;
    padding:0;
    margin:0;
    margin-left:-100%;
    background-color:green;
    white-space:nowrap;
    text-align:center;
}
#instagram ul li {
    display:inline-block; 
    margin:10px;
    padding:0;
}

查看我的working Fiddle

Answer 3

如果您考虑使用div而不是ul，它将使解决方案更好，更容易。考虑下面的代码。这定义了具有固定像素的#instagram div（但它将变为％）并且基于其他所有内容。这使得解决方案具有响应性。

我还将代码放在这个jfiddle上：http://jsfiddle.net/cB7e4/

<div id = "instagram">
  <div class="photos">
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
  </div>
</div>

<style>
#instagram
{
    width: 500px;
    height: 100px;
    background: #3AD7FF;
    position: absolute;
}

.photos
{
    width: 98%;
    height: 80%;
    margin-top: 2%;
    background: #B8FCCD;
    padding: 0% 1%;
    overflow-x:scroll;
    white-space:nowrap;
}

.images
{
    margin: 1.5% 1% 1% 0%;
    height: 80%;
    background: #F2FEE2;
    display: inline-block;
    position: relative;
}

.images img
{
    height: 100%;
}
</style>

Answer 4

怎么样这样？

.photos
    {
        list-style-type:none;
    }
    .photos li {
        float: left;
        margin:0px 5px 0px 5px;
    }

li元素向左浮动，图片之间有一个小的边距

响应全宽平铺图像

4 个答案: