li與圖像放在文字上方

文字應該在圖像旁邊。我只是遇到了列表點下面的文本顯示的問題，而不是緊挨着它。這裏有什麼問題？我看過其他例子，使它完全一樣。但是在這個例子中它可以工作。 li與圖像放在文字上方

.icon { 
 
    list-style-type: none; 
 
} 
 
      
 
.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
 
.icon li:nth-child(2):before {content: url(icon-2.png)' ';} 
 
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

<ul class="icon"> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
</ul>

來源

2016-12-12 azrm

的可能的複製[調整列表樣式圖像位置？（http://stackoverflow.com/questions/1708833/adjust-list-style-image-position） –

您可以使用CSS Flexbox的，讓您的<h3>包括所有與<span>文本，然後讓你<li> Flex容器。像：

<li> 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
</li>

看一看下面的代碼片段：

.icon { 
 
    list-style-type: none; 
 
} 
 
      
 
.icon li:nth-child(1):before {content: url('http://placehold.it/50x50')' ';} 
 
.icon li:nth-child(2):before {content: url(http://placehold.it/50x50)' ';} 
 
.icon li:nth-child(3):before {content: url(http://placehold.it/50x50)' ';} 
 

 
li { 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 10px 0; 
 
} 
 

 
li:before { 
 
    height: 50px; 
 
} 
 

 
h3 { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding-left: 10px; 
 
} 
 

 
span { 
 
    display: block; 
 
    font-weight: normal; 
 
    font-size: small; 
 
}

<ul class="icon"> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
</ul>

希望這有助於！

來源

2016-12-12 14:35:25

非常感謝，正是我看着f或 – azrm

@alice它是我的榮幸！ –

這裏icon li:nth-child(1):before行爲像塊級元素和<h3>都是塊級元素。所以改變你的CSS爲：

.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
.icon li:before { display: inline-block } 
h3 {display: inline-block; }

來源

2016-12-12 14:38:12 rapidRoll

PFB的工作片段。我只是增加了一個div標籤的B/W <李>和< /李>和應用CSS所有<DIV>標籤這是<李>的直接孩子有CSS屬性顯示：inline-block的

.icon { 
 
    list-style-type: none; 
 
} 
 
li>div 
 
{ 
 
display:inline-block; 
 
} 
 
.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
 
.icon li:nth-child(2):before {content: url(icon-2.png)' ';} 
 
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

<ul class="icon"> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
</ul>

來源

2016-12-12 14:52:19 Harinder

li與圖像放在文字上方

回答

相關問題