Как я могу централизовать 5 разделов, не используя margin-left?

Ответ 1

flexbox может быть ответом, который вы ищете.

#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;
}

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

Ответ 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>

Ответ 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>

Ответ 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>

Ответ 5

Вы можете использовать марж слева, но первый дочерний элемент имеет нулевой марж с помощью селекторов css.

    div *{
        display:inline-block;
        /*
        * set your child elements to a set width. If you want them to change
        * size you can use % for the width and adjust this using @media
        */
        margin-left:20px;//use % if you want it to scale.
    }

    div:first-child { 
        margin-left:0px;
    }

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

все элементы будут иметь маржу слева от 20px, кроме первой. Это даст вам линию смыва в левом div.

Если вы не хотите, чтобы элементы переполнялись до следующей строки, вы можете установить, чтобы родительский элемент имел overflow-x none. И выберите разные ширины для дочерних элементов. Bootstrap использует поля и встроенный блок, когда он размещает несколько элементов бок о бок. Если вы посмотрите на темы начальной загрузки, когда они помещаются на телефон, элементы переключаются на стек.

см. следующую ссылку для получения дополнительных сведений о css-селекторах. http://www.w3schools.com/cssref/sel_firstchild.asp