放置在標籤的使用CSS右側的圖標

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    background-position: right; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

我有一個由帶有標籤和文章，當我點擊標籤輸入的手風琴，文章展開或縮回。我想在標籤的右端添加一個圖標。

我試着用：以後，像這樣：

#accordion label:after{ 
content:url(/img.png); 
}

但隨後，該圖標是文本後立即放置，這樣

文本圖標

我'd喜歡它被放置在右邊，像這樣

Text ----------------------------------------------- ----------------------- ICON

當我使用屬性background-position，它仍然在同一個地方。

我該怎麼做？

來源

2016-11-30 DevBob

內聯元素（如SPAN，標籤等）顯示，使得其瀏覽器根據其內容計算高度和寬度。如果你想控制高度和寬度，你必須改變這些元素的塊。標籤樣式改爲{display：block; width：100％} – Arun

添加了代碼段！ – DevBob

您可以選擇的一個選項是將#accordion label的位置設置爲相對，將:after的僞元素設置爲absolute。然後爲其分配right值0（或任何您想要的值）。

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
    position: relative; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    position: absolute; 
 
    right: 0; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

來源

2016-11-30 16:40:56

你必須對你的圖標使用position: absolute;：

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
    position: relative; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    position: absolute; 
 
    right: 15px; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

來源

2016-11-30 16:42:54 H4ris

放置在標籤的使用CSS右側的圖標

回答

相關問題