在形狀中包含的列表項之間添加水平空間

Question

我已經創建了一個列表，其中文字包含在一個圓圈內。問題是這些圈子橫向互相碰撞，我希望他們之間有一些空間。我試過用填充和邊距搞亂，但沒有運氣。

.oval { 
 
    width: 120px; 
 
    height: 100px; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
    background: gray; 
 
    color: white; 
 
    border: 2px solid white; 
 
    font-weight: bold; 
 
}

<ul> 
 
    <li class="oval">item1</li> 
 
    <li class="oval">item2</li> 
 
    <li class="oval">item3</li> 
 
</ul>

Answer 1

只需設置display到inline-block，然後你可以用利潤

.oval { 
 
    width: 120px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
    background: gray; 
 
    color: white; 
 
    border: 2px solid white; 
 
    font-weight: bold; 
 
}

<ul> 
 
    <li class="oval">item1</li> 
 
    <li class="oval">item2</li> 
 
    <li class="oval">item3</li> 
 
</ul>

發揮更確切地說，而不是添加的margin-right規則爲所有.oval個元素我想將它添加到除最後一個具有：

.oval:not(:last-child) { 
    margin-right: 50px; 
} 

Answer 2

將顯示器設置爲inline-block的到.oval

Answer 3

顯示更改爲inline-block是正確的，但爲了保持「項n， 「垂直居中添加：

line-hight: 100px; 

到您的CSS。如果您計劃在每個圓圈中使用更多文本（多行），則必須添加一個內部元素以保持文本居中。

.oval { 
 
    width: 120px; 
 
    height: 100px; 
 
    display:inline-block; 
 
    margin-left: 50px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
    background: gray; 
 
    color: white; 
 
    border: 2px solid white; 
 
    font-weight: bold; 
 
    
 
}

<ul> 
 
    <li class="oval">item1</li> 
 
    <li class="oval">item2</li> 
 
    <li class="oval">item3</li> 
 
</ul>

Answer 4

一個Flexbox的解決方案......

ul { 
 
    display: flex; 
 
    /* change this value as you need */ 
 
    width: 500px; 
 
    justify-content: space-between; 
 
} 
 

 
.oval { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 120px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background: gray; 
 
    color: white; 
 
    border: 2px solid white; 
 
    font-weight: bold; 
 
}

<ul> 
 
    <li class="oval">item1</li> 
 
    <li class="oval">item2</li> 
 
    <li class="oval">item3</li> 
 
</ul>