如何將所有子元素與浮動屬性左對齊

我無法找到任何解決方案來解決我的問題。我不希望子元素之間有任何空間，所以我添加了float：left子元素。但是當元素分成兩行時會引起問題。如何將所有子元素與浮動屬性左對齊

HTML：

<span class="section-title"> 
    <span class="yellow">This</span> 
    <span class="red">is</span> 
    <span class="brown">test</span> 
    <span class="">content</span> 
</span>

CSS：

.section-title {text-align:center;} 
.section-title span {float: left; display:inline-block;}

來源

2016-11-29 Pratik Deshmukh

顯示你的代碼。 – connexo

加入我的問題。 –

刪除不需要的空間，不要float: left;，但在父元素，重新設置中設置font-size: 0;它在孩子們的想要的font-size。

此外，您使用默認具有display: inline;的容器的span。在這裏，你需要一個具有display: block;的元素。使用display: inline;時，文本居中功能無法工作。

所以要麼設置display: block;在span或使用div代替span。 div默認爲display: block;。我建議後者，但我不確定你是否能夠控制HTML，所以我沒有改變它。

.section-title { 
 
    text-align: center; 
 
    font-size: 0; 
 
    display: block; 
 
} 
 
.section-title span { 
 
    font-size: 36px; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
} 
 
.yellow { 
 
    color: yellow; 
 
} 
 
.red { 
 
    color: red; 
 
} 
 
.brown { 
 
    color: brown; 
 
}

<span class="section-title"> 
 
    <span class="yellow">This</span> 
 
    <span class="red">is</span> 
 
    <span class="brown">test</span> 
 
    <span>content</span> 
 
</span>

來源

2016-11-29 07:27:46 connexo

它工作。非常感謝。 –

試試下面的代碼：

.section-title { 
    text-align: center; 
    display: block; 
} 

.section-title span { 
    font-size: 36px; 
    display: inline-block; 
    text-transform: uppercase; 
    }

來源

2016-12-16 08:10:15

如何將所有子元素與浮動屬性左對齊

回答

相關問題