列表項文本不斷包裝下圖標

Question

只是想解決我的圖標我使用列表項中的令人沮喪的問題。當文本換行時，它總是在圖標下面，而不是直接在第一行文本的下面。無法解決發生了什麼事。我曾嘗試在圖標上添加一個高度，但它的功能相同。

希望你能幫上忙。

https://jsfiddle.net/rufusbear/40wr9ngt/

#facts { 
 
    padding: 0; 
 
    margin: 1% 0 0 0; 
 
    list-style: none; 
 
} 
 
#facts li { 
 
    margin: 2% 17%; 
 
} 
 
#facts i { 
 
    margin-right: 2%; 
 
    font-size: 130%; 
 
} 
 
@font-face { 
 
    font-family: "Flaticon"; 
 
    src: url("./Flaticon.eot"); 
 
    src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
 
    @font-face { 
 
    font-family: "Flaticon"; 
 
    src: url("./Flaticon.svg#Flaticon") format("svg"); 
 
    } 
 
} 
 
[class^="flaticon-"]:before, 
 
[class*=" flaticon-"]:before, 
 
[class^="flaticon-"]:after, 
 
[class*=" flaticon-"]:after { 
 
    font-family: Flaticon; 
 
    .font-size: 20px; 
 
    font-style: normal; 
 
    .margin-left: 20px; 
 
} 
 
.flaticon-apple:before { 
 
    content: "\f100"; 
 
} 
 
.flaticon-biscuit:before { 
 
    content: "\f101"; 
 
} 
 
.flaticon-coffee-cup:before { 
 
    content: "\f102"; 
 
} 
 
.flaticon-film:before { 
 
    content: "\f103"; 
 
} 
 
.flaticon-gamepad:before { 
 
    content: "\f104"; 
 
} 
 
.flaticon-lawn-mower:before { 
 
    content: "\f105"; 
 
}

<ul id="facts"> 
 
    <li> 
 
    <i class="flaticon-coffee-cup"></i> 
 
    random text random text random text random text random text 
 
    </li> 
 
</ul>

Answer 1

一個更好的辦法是將圖標與position: absolulte，並添加<li>一些左縮進。

#facts { 
 
    padding: 0; 
 
    margin: 1% 0 0 0; 
 
    list-style: none; 
 
} 
 

 
#facts li { 
 
    position: relative; 
 
    padding-left: 25px; 
 
    margin: 2% 17%; 
 
} 
 

 
#facts i { 
 
    position: absolute; 
 
    font-size: 130%; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
@font-face { 
 
    font-family: "Flaticon"; 
 
    src: url("./Flaticon.eot"); 
 
    src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
    @font-face { 
 
    font-family: "Flaticon"; 
 
    src: url("./Flaticon.svg#Flaticon") format("svg"); 
 
    } 
 
} 
 

 
[class^="flaticon-"]:before, 
 
[class*=" flaticon-"]:before, 
 
[class^="flaticon-"]:after, 
 
[class*=" flaticon-"]:after { 
 
    font-family: Flaticon; 
 
    .font-size: 20px; 
 
    font-style: normal; 
 
    .margin-left: 20px; 
 
} 
 

 
.flaticon-apple:before { 
 
    content: "\f100"; 
 
} 
 

 
.flaticon-biscuit:before { 
 
    content: "\f101"; 
 
} 
 

 
.flaticon-coffee-cup:before { 
 
    content: "\f102"; 
 
} 
 

 
.flaticon-film:before { 
 
    content: "\f103"; 
 
} 
 

 
.flaticon-gamepad:before { 
 
    content: "\f104"; 
 
} 
 

 
.flaticon-lawn-mower:before { 
 
    content: "\f105"; 
 
}

<ul id="facts"> 
 
    <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li> 
 
    <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li> 
 
</ul>

Answer 2

無需感到沮喪，這是一個兩行CSS！請在下面添加行#facts我

display: block; 
float: left; 

所以最後的代碼塊應該是這樣的：

#facts i { 
    margin-right: 2%; 
    font-size: 130%; 
    display: block; 
    float: left; 
} 

希望這有助於。