이미지가있는 체크 박스 목록

Question

수직으로 체크 표시 기호에 문제가 있습니다. 기본적으로 왼쪽 하단 구석에 있습니다.

이 내 checkboxlist 모습 방법입니다

이 내가 그것을 같이하는 방법입니다 :이 솔루션을 종료 몇 가지 조사 후

<asp:CheckBoxList ID="FoodCheckBoxList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"> 
     <asp:ListItem> <img src="../images/foods/Food1.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food2.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food3.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food4.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food5.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food6.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food7.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food8.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food9.png" /> </asp:ListItem> 
</asp:CheckBoxList> 

Answer 1

:

html

<asp:CheckBoxList ID="FoodCheckBoxList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" ClientIDMode="Static"> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
</asp:CheckBoxList> 

인라인 스타일로 나를 비난하지 말고 그냥 이미지 대신 사용하십시오. 당신이 당신의 필요에 맞게 조정하는 픽셀을 재생할 수 있습니다 물론

CSS

#FoodCheckBoxList [type="checkbox"] { 
    margin: 0; 
    vertical-align: middle; 
    position: relative; 
    top: 70px; 
    } 

    label { 
    display: block; 
    padding-left: 35px; 
    text-indent: -20px; 
    } 

.