사라지는 글 머리 기호

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

위의 페이지에서 왼쪽에 이미지가 떠있었습니다. 오른쪽에는 "기능"이라는 제목의 목록이 있습니다. 목록 항목에는 배경 이미지가 있지만 표시되지 않습니다. 목록 2는 배경 이미지가 어떻게 보이는지 보여줍니다.

글 머리 기호를 표시하는 방법을 아는 사람이 있습니까?

Answer 1

이미지에 float : left 속성이 있습니다. 따라서 목록 항목은 이미지의 "뒤에"렌더링됩니다.

margin-left:200px; 

UL 요소에 문제가 해결됩니다.

또는 UL 요소에 float : left를 적용 할 수 있습니다. 이렇게하면 이미지가 오른쪽으로 이동하지만 다음과 같은 내용이 같은 줄에 나타납니다. 당신은

clear:both 

이 ... 적용된 ... clearing the UL-element하여이를 방지하거나 함께 UL-요소 뒤에 요소를 추가 할 수 있습니다.

이 동작에 대한 자세한 내용은 http://www.positioniseverything.net/easyclearing.html에서 확인할 수 있습니다.

Answer 2

또는 background-image 대신 list-style-image 속성을 사용할 수 있습니다. 요 전날이 문제에 직면했습니다. '이웃'에 떠있는 텍스트 줄 바꿈 동작은 배경 이미지가 아닌 '내용'에만 적용됩니다 (예 :).

Answer 3

나는이 일 년 된 게시물입니다 알고 있지만 다른 사람들이 알고 할 수 있습니다 ... 당신은 콘텐츠 관리 시스템을 사용하고 일부는 당신이 원하는하지 않을하지 않는 일부 페이지 이미지 &이있는 경우 어떻게됩니까

목록 항목이 콘텐츠에서 200 픽셀이 될까요?

당신은 당신의 UL/OL 요소에이 CSS를 추가 할 수 있습니다

overflow:hidden; 

나는이 도움이되기를 바랍니다.

Answer 4

이 스레드는 참으로 오래된,하지만 항상 관련 ...

또 다른 대체 솔루션 :

display: inline-block; 

는 UL에이 를 넣습니다. float 뒤에 전체 ul을 표시합니다. 이렇게하면 이미지가 있거나없는 페이지를 만들 수 있으며 항상 올바르게 표시됩니다 (FF4, IE7 & 8, Chrome 11에서 확인).