Question

我有一个无序列表，其中包含一些圆形图像。圆圈的设置宽度为350px并向左浮动，这样当您缩放时，行上的图像数量会发生变化。我不想这样，如果图像右侧有一个间隙（图像与宽度不完全吻合），那么图像将全部居中。我曾尝试在某些地方设置汽车保证金，但它不起作用。我在下面提供了一些图片来帮助解释：

Here is what the images look like when the don't match the width

Here is what i would wan't it to look like (I made this with an image editor)

以下是我的代码：

HTML：

<div class="main">
<div class="gallerydisplay">
    <ul>
        <li><div class="circleoutline"><img src="http://kerivillage.com/wp-content/uploads/2015/11/spa.candles.keri_.village.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.faroairporttransfersalgarve.com/app/webroot/blog/wp-content/uploads/2015/05/spa.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.myholidayguru.co.uk/wp-content/uploads/2014/09/wellness-candles-stones-flowers-spa-748x498.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://static1.squarespace.com/static/52291225e4b0af57b790b008/t/522b641fe4b04c838fabf7b1/1378575396909/spa-still-life.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.lemassagerb.com/or-spa-sliderimage.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.pampermetanninganddayspa.com/Spa%20(1).jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.tapatiocliffshilton.com/interactive/top_spa2.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.spa-tara.com/wp-content/uploads/2012/08/candles1.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.theconistonhotel.com/userfile/spa/couples-massage.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://cologne.regency.hyatt.com/hyatt/images/hotels/colog/spa_signature.jpg.pagespeed.ce.o6UsOTF7Ab.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="https://static.mgmresorts.com/content/dam/MGM/mgm-grand/spa-and-salon/grand-spa-&-health-club/architecture/mgm-grand-amenities-spa-lifestyle-woman-facial-mask-@2x.jpg.image.550.325.high.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.kidayspa.co.uk/wp-content/uploads/2012/05/Spa-Day-Banner2.png" height="100%"></div></li>
        <li><div class="circleoutline"><img src="https://pixabay.com/static/uploads/photo/2015/03/23/17/43/relaxation-686392_960_720.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.cadburyhotelbristol.co.uk/assets/media/images/boxes/Spa-Things.gif" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.lcc-transarabiandubai.com/image/static/AE1135/files/-1448431703223/spa.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.omnihotels.com/-/media/images/globals/spa/massage-couples-166668375.jpg?h=660&la=en&w=1170" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.omnihotels.com/-/media/images/globals/spa/honey-144285723.jpg?h=660&la=en&w=1170" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.bbcgoodfood.com/sites/default/files/glossary/banana-crop.jpg" height="100%"></div></li>
    </ul>
</div>

CSS：

    .gallerydisplay
{
    margin-top: 5vh;
    width: 100%;
    clear: both;
}

.gallerydisplay ul
{
    margin: auto;
    padding: 0;
    text-align: center;
}

.gallerydisplay li
{
    display: block;
    float: left;
    width: 350px;
    margin: 1%;
    height: 350px;
    transition: transform 0.4s;
    box-shadow: 0.2vh 0vh 0.8vh #888888;
    border-radius: 50%;
    overflow: hidden;
}

.circleoutline
{
    width: 95%;
    height: 95%;
    margin: auto;
    position: relative;
    top: 2.3%;
    border-radius: 50%;
    overflow: hidden;
}

Answer 1

问题是将float:left用于.gallerydisplay li类。请使用display: inline-block;代替float:left;。

.gallerydisplay li {
    display: inline-block;
    width: 350px;
    margin: 1%;
    height: 350px;
    transition: transform 0.4s;
    box-shadow: 0.2vh 0vh 0.8vh #888888;
    border-radius: 50%;
    overflow: hidden;
}

或者您可以将媒体查询用于特定的分辨率范围，如下面的代码：

@media screen and (max-width: 699px) and (min-width: 520px) {
   .gallerydisplay li:first-child {
     margin-left: 10px;
   }    
}

并将margin-left添加到第一个孩子。但是，响应式解决方案将宽度作为图像的百分比。

PS。您可以使用引导程序轻松地使用网格系统解决此问题。这是链接：http://getbootstrap.com/css/#grid

Answer 2

您可以将li元素设置为显示内联块，然后移除左侧浮动。因为您的有序列表是使用文本对齐中心设置的，所以li将位于其中心。你的CSS将成为：

.gallerydisplay ul{
  margin: auto;
  padding: 0;
  text-align: center;
}

.gallerydisplay li{
  display: inline-block;
  width: 350px;
  margin: 1%;
  height: 350px;
  transition: transform 0.4s;
  box-shadow: 0.2vh 0vh 0.8vh #888888;
  border-radius: 50%;
  overflow: hidden;
}

中心列表作为屏幕宽度的变化

2 个答案: