控制::的尺寸::

我使用下面的CSS創建了一個導航，以實現導航元素之間的相等距離。但是，我遇到了:: after元素在列表區域下方創建空閒空間的問題，其高度似乎無法調整。控制::的尺寸::

看這個圖象：

呈現的列表與浪費的空間

ul.formnav { 
 
    padding: 0px 8%; 
 
    justify-content: space-between; 
 
    text-align: justify; 
 
} 
 
ul.formnav::after { 
 
    background-color: red; 
 
    content: 'This is wasted Space'; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height 
 
} 
 
ul.formnav li { 
 
    display: inline-block; 
 
    color: #FFF; 
 
    background-color: #999; /*Circle Formatting*/ 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
}

<div> 
 
    <ul class="formnav"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

我可以調整內容本身，例如我可以設置height:0px，紅色背景將消失或者簡單設置爲content:'';，但::after元素佔用的空間保持不變。任何想法如何解決這個問題，而不會下降？（由於兼容性，不能使用柔性盒）

來源

2015-11-05 user2340243

什麼是'目的:: after'在這種情況下？ – cocoa

爲什麼不簡單地爲li元素添加邊距以在它們之間增加空間？ https://jsfiddle.net/8nc8ft2x/ – Jesse

@cocoa - ':: after'創建第二行，這樣'text-align：justify'規則將平均分配第一行的元素。這是一個間距黑客。 – j08691

出現的額外空白是由於僞元素在新行中形成了一個行框，並且垂直間距是劃分爲基線上方和下方的行。

如果您在父容器上設置line-height: 0，然後在僞元素上設置vertical-align: top，則會將空白空間縮小到零高度。

ul.formnav { 
 
    padding: 0px 8%; 
 
    justify-content: space-between; 
 
    text-align: justify; 
 
    border: 1px dotted blue; /* demo only */ 
 
    line-height: 0; 
 
} 
 
ul.formnav::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
    vertical-align: top; /* gets rid of space below the baseline */ 
 
} 
 
ul.formnav li { 
 
    display: inline-block; 
 
    color: #FFF; 
 
    background-color: #999; /*Circle Formatting*/ 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
}

<div> 
 
    <ul class="formnav"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

來源

2015-11-05 15:51:13

這樣做的工作。輝煌！先生非常感謝您！ – user2340243

或者你可以只使用Flexbox的：

ul.formnav { 
 
    padding: 0px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border: 1px solid grey; 
 
} 
 
ul.formnav li { 
 
    color: #FFF; 
 
    background-color: #999; 
 
    /*Circle Formatting*/ 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
}

<div> 
 
    <ul class="formnav"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

來源

2015-11-05 15:56:22

控制::的尺寸::

回答

相關問題