如何在不使用margin-left的情况下集中5个div？

Question

我试图在buf2内对齐5个div，如下所示：

有没有办法在不使用margin-left的情况下执行此操作？

我的意思是..如果我想消除其中一个中间div并且它们仍然是对齐的？例如..如果我删除div，其他人将自动居中。像这样：

我找到了这样的解决方案：

div4

但问题是： 第一个div和最后一个必须像向左浮动并向右浮动......而这个解决方案将每件事都集中在这样的事情上：

Answer 1

flexbox可能是您正在寻找的答案。

＆＃13;

＆＃13;

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  width: 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

＆＃13;

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您想最大化browser compatibility，请务必同时添加正确的供应商前缀：

#container {
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  /* … */
}

Answer 2

也许是这样

text-align: justify - 此功能实际上适用于文本以及我们的行块（display: inline-block）点，并且是连续不可分割的单词，这种行为非常自然。

顺便提一下，值得考虑的是text-align: justify继承的属性，以及下一个后代的text-align: left - 必要的措施。通过这种方式，我们将返回前一状态块的内容对齐。

此算法不适用于最后一行，并且适用于除她之外的所有行。因此，使用:after我添加到另一个元素的末尾，安抚奶嘴，并将其拉伸到宽度的100％，因此迫使他延伸到名单的最后一行。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {    
    text-align: justify; 
    font-size: 0;
}
div:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content:'';
    display: inline-block;
}
div > div {
    background: #E76D13;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;    
    line-height: normal;
    font-size: 14px;
    vertical-align: top;    
}

<div>
    <div>1</div>
   <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

Answer 3

如果您只需要支持现代浏览器，则可以使用灵活的盒子布局。

    .parent{
        display:flex;
        justify-content:space-between;
        width: 815px;
        border: solid 1px #aaa;
    }

    .child {
        background-color:yellow;
        width: 100px;
        height: 100px;
        border: solid 1px #ccc;
    }

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>  
    </div>

详细了解灵活布局here

To know if your browser supports flexible layout

Answer 4

我知道已有答案，但对于未来的用户，我想确保他们看到使用flexbox的正确方法。正确且负责任地使用前缀是必须的。没有它们你将无法支持IE10，Android 4.1之前的任何东西以及iOS7之前的任何东西。所以要小心，因为flexbox不会很好地降级。

这是关于flexbox的一篇很棒的文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是一个检查浏览器兼容性的好网站：http://caniuse.com/#feat=flexbox

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  flex: 0 0 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

/* The order of these prefixed properties is very important!!!  */

#container {
  display: -webkit-box;                       /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;                          /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;                       /* TWEENER - IE 10 */
  display: -webkit-flex;                      /* NEW - Chrome */
  display: flex;                              /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-justify-content:space-between;      /*Chrome */
  justify-content: space-between;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 1px solid black;
  background: #ccc;
}
#container>div {
    -webkit-box-flex: 0 0 100px;                /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 100px;                     /* OLD - Firefox 19- */
  width: 20%;                                   /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 100px;                      /* Chrome */
  -ms-flex: 0 0 100px;                          /* IE 10 */
  flex: 0 0 100px;                              /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

Answer 5

您可以使用左边距但使用css选择器使第一个子元素的边距为零。

onclientclick

除第一个元素外，所有元素的剩余边距均为20px。这将在左侧div上给你一条冲洗线。

如果您不希望元素溢出到下一行，则可以将父元素设置为overflow-x none。并为子元素选择不同的宽度。 Bootstrap在并排放置多个元素时使用边距和内联块。如果您在放置电话时查看引导主题，则元素会切换到堆栈。

有关css选择器的更多信息，请参阅以下链接。 http://www.w3schools.com/cssref/sel_firstchild.asp