Question

今天我面临着一个很大的问题，即设置自定义宽度的浮动元素居中。为了更好的解释，我为你做了一个片段：

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    float: left;
}

.container {
    display: inline-block;
}

<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
  </div>
</div>
<br>
<div>
  <div class="container">
    <div class="square">a</div>
    <div class="square">b</div>
    <div class="square">c</div>
    <div class="square">d</div>
    <div class="square">e</div>
  </div>
</div>

问题是前三个方格在居中后会收缩。

我浮动元素的原因是第二个容器必须与第一个容器相同，并且它必须包含5个元素（以覆盖文档的整个宽度）。以下是没有浮动的样子（参见元素之间的混乱）：

body { text-align: center; }
.square {
    width: 20%; height: 100px;
    background: cornflowerblue;
    display: inline-block;
}

.container {
    display: block;
}

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

现在元素的宽度正确，但由于元素之间的混乱，第二行不会覆盖文档的宽度。

有没有办法让自定义宽度居中的浮动元素？我应该为容器元素使用哪些样式？

Answer 1

好的，我想我得到了你需要的东西

.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
font-size: 1rem;
}

.container {
display: block;
font-size:0;
}

jsfiddle

Answer 2

body { text-align: center; }
.square {
  width: 20%; height: 100px;
  background: cornflowerblue;
  float: left;

}

.container {
width:100%;
margin-right:20%;
margin-left:20%;
}

你在找这样的东西吗？

Answer 3

添加min-width:7px;这将解决您的问题

＆＃13;

body { text-align: center; }
.square { 
    width: 20%;
    height: 100px;
    background: cornflowerblue;
    float: left;
    min-width:7px;
}

.container {
    display: inline-block;
}

＆＃13;

<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
    </div>
</div>
<br>
<div>
    <div class="container">
        <div class="square">a</div>
        <div class="square">b</div>
        <div class="square">c</div>
        <div class="square">d</div>
        <div class="square">e</div>
    </div>
</div>

＆＃13;

这里你的5 div行时代也在发挥作用。

使用自定义宽度对浮动元素进行居中

3 个答案: