背景不工作圖像上的空白跨度

我試圖把一個箭頭從圖像跨度的左側。我使用圖像的空白區域併爲其分配背景圖像。但仍然沒有顯示圖像。背景不工作圖像上的空白跨度

ul { 
 
    margin: 0px 0px 0px 20px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
\t margin-bottom: 5px; 
 
\t margin-top: 5px; 
 
} 
 

 
.expand-icon 
 
{ 
 
\t width: 15px; 
 
\t vertical-align: middle; 
 
\t float: left; 
 
\t line-height: 1.5em; 
 
\t height: auto; 
 
\t background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png"); 
 
} 
 

 
.edit-list-span { 
 
\t border: 1px solid #3465a4; 
 
    padding: 2px 5px 2px 5px; 
 
    background: #fff; 
 
    line-height: 1.5em; 
 
    display: block; 
 
    overflow:hidden; 
 
}

<ul class="myUL"> 
 
    <li class="edit-list"> 
 
    <span class="expand-icon"></span> 
 
    <span class="edit-list-span" contenteditable="true">Test Span</span> 
 
    </li> 
 
</ul>

.expand-icon是其中我試圖把圖像，但其不顯示的跨度。請幫我解決這個問題。

來源

2017-05-21 Shashwat Kumar

一種方法是使lidisplay: flex;並設置正確的span到flex-grow: 1或flex: 1 0 0;短，那麼解決您的背景屬性所以它的大小和位置。

ul { 
 
    margin: 0px 0px 0px 20px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
\t margin-bottom: 5px; 
 
\t margin-top: 5px; 
 
} 
 

 
.edit-list { 
 
    display: flex; 
 
} 
 

 
.expand-icon 
 
{ 
 
\t width: 15px; 
 
\t line-height: 1.5em; 
 
\t background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") 0 center no-repeat/100%; 
 
} 
 

 
.edit-list-span { 
 
\t border: 1px solid #3465a4; 
 
    padding: 2px 5px 2px 5px; 
 
    background: #fff; 
 
    line-height: 1.5em; 
 
    overflow:hidden; 
 
    flex: 1 0 0; 
 
}

<ul class="myUL"> 
 
    <li class="edit-list"> 
 
    <span class="expand-icon"></span> 
 
    <span class="edit-list-span" contenteditable="true">Test Span</span> 
 
    </li> 
 
</ul>

但你並不需要2個跨度。你可以把背景放在一個，或只是li。

ul { 
 
    margin: 0px 0px 0px 20px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
\t margin-bottom: 5px; 
 
\t margin-top: 5px; 
 
} 
 

 
.edit-list-span { 
 
\t border: 1px solid #3465a4; 
 
    padding: 2px 5px 2px 5px; 
 
    line-height: 1.5em; 
 
    overflow:hidden; 
 
    background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") 0 center no-repeat #fff/20px 20px; 
 
    display: block; 
 
    padding-left: 20px; 
 
}

<ul class="myUL"> 
 
    <li class="edit-list"> 
 
    <span class="edit-list-span" contenteditable="true">Test Span</span> 
 
    </li> 
 
</ul>

來源

2017-05-21 22:19:38

我想讓箭頭超出文本範圍，因此請使用單獨的跨度。但根據你第一次使用flex的建議，當我這樣做時，其他UI正在完全改變。我在這裏放了一小段代碼，其中我的代碼重複了這麼多單元。 –

@ShashwatKumar片段在哪裏？ –

我的意思是在這個問題中，代碼片段是我的代碼的一部分。 –

你看不到圖像，因爲它是128x128，它有它周圍的透明區域。您可以在跨度添加圖像，而不是使之成爲背景，在.expand-icon img

改變圖像的大小，我希望這將澄清它爲您

ul { 
 
    margin: 0px 0px 0px 20px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
\t margin-bottom: 5px; 
 
\t margin-top: 5px; 
 
} 
 

 
.expand-icon 
 
{ 
 
    vertical-align: middle; 
 
    float: left; 
 
    line-height: 1.5em; 
 
    width: 1.5em; 
 
    min-height: 1px; 
 
} 
 
.expand-icon img { 
 
    width: 1.5em; 
 
} 
 

 
.edit-list-span { 
 
    border: 1px solid #3465a4; 
 
    padding: 2px 5px 2px 5px; 
 
    background: #fff; 
 
    line-height: 1.5em; 
 
    display: block; 
 
    overflow:hidden; 
 
}

<ul class="myUL"> 
 
    <li class="edit-list"> 
 
    <span class="expand-icon"> 
 
     
 
    </span> 
 
    <span class="edit-list-span" contenteditable="true"> 
 
     Test Span 
 
    </span> 
 
    </li> 
 
</ul>

來源

2017-05-21 22:12:20

當圖像被從跨度去除，接下來的跨度左移。有什麼辦法可以防止這種情況發生？ –

將跨度與圖像放在另一個跨度內。看到我上面更新的代碼。 –

no no。我不想重疊兩個跨度。我的意思是當img標籤被放在.expand-icon中時，就像你的舊片段中的情況一樣，那很好。但是，如果我刪除img標記，保持空白，則.expand-icon的寬度會減小，並且.edit-list-span會左移。所以我想知道是否有辦法保持.edit-list的寬度與圖像或內部沒有圖像固定。 –

背景不工作圖像上的空白跨度

回答

相關問題