Nieprawidłowe wyrównywanie kolumn

Question

Próbuję utworzyć układ trzech kolumn dla mojej witryny. Kiedy używam właściwości kolumny i ustawiam ją na "3" kolumny, nie jest ona poprawnie wyrównana. Każda kolumna po poprzedniej wydaje się być przesunięta nieco bardziej. Czy istnieje sposób, aby to poprawić? To nie to samo, kiedy ustawić liczyć kolumna na "5" kolumnę i zminimalizować okno

.widget-column { 
 
    columns: 5em 3; 
 
    /* Test with 5 columns */ 
 
    -moz-columns: 5em 3; 
 
    /* Test with 5 columns */ 
 
    -webkit-columns: 5em 3; 
 
    /* Test with 5 columns */ 
 
} 
 
.widget-column p { 
 
    padding: 1em; 
 
}

<div class="widget-column"> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
</div>

JSFiddle

Answer 1

Ponieważ <p> jest elementem blokowym, dodaje znak nowej linii przed i po elemencie. Możesz jednak ustawić go jako blok inline, ustawiając display:inline-block; oraz width:100%; dla poszerzenia szerokości.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.widget-column { 
 
    margin: 10px; 
 
    text-align: center; 
 
    columns: 5em 3; 
 
    -o-columns: 5em 3; 
 
    -ms-columns: 5em 3; 
 
    -moz-columns: 5em 3; 
 
    -webkit-columns: 5em 3; 
 
    column-gap: 0px; 
 
    -o-column-gap: 0px; 
 
    -ms-column-gap: 0px; 
 
    -moz-column-gap: 0px; 
 
    -webkit-column-gap: 0px; 
 
} 
 
.widget-column p { 
 
    background: #EEE; 
 
    padding: 1em; 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<div class="widget-column"> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
    <p>Column</p> 
 
</div>

Answer 2

You have to use <span> in case of <p> tag, <p> tag by default starts from next line 

Oto plnk:

http://plnkr.co/edit/n4TlD6nVSqOa9U5F2PON?p=preview