웹 페이지에 이미지를 표시 할 방법을 찾고 있습니다. 이 이미지는 정렬되지 않은 목록의 목록 항목 오른쪽에 있어야합니다. 목록 항목 태그 내에 있지만 목록 항목 내에있는 텍스트 바로 뒤에있는 것이 좋을 것입니다. 그러나이 이미지를 목록 항목 태그 안에 넣으면 이미지가 다음 줄로 튀어 나옵니다. 누구나 이것이 왜 일어나고 있는지 그리고/또는 그것을 고치는 방법을 알고 있습니까? 감사.이미지 및 목록 항목
CSS에서 배경 이미지를 배경 이미지 : background-position : right로 설정하고 이미지의 너비를 오른쪽 패딩에 추가하십시오. 이것은 효과적으로 목록 항목의 오른쪽에 나타나는 이미지의 환상을 만듭니다.
저는 CSS 전문가는 아니지만 약간의 해킹 같은 느낌입니다. 상자 모델을 사용하여이 작업을 수행 할 수 없어야합니다. 그러면 텍스트와 이미지를 어떻게 든 왼쪽에서 오른쪽으로 스택하는 상자로 만들 수 있습니까? –
한 가지 방법으로 내 방식으로 할 수 있습니다. 또는 이미지를 span에 텍스트를 포함하는 LI에 포함시킬 수 있으며, 어쨌든 상자 모델을 얻기 위해 CSS를 해킹해야합니다. 그렇지 않으면 " : "모든 브라우저가 완전히 지원하지 않는 가상 클래스. – PseudoNinja
@Tom Anderson 나는 당신의 방식대로 해보려고했지만, 작동하는 해결책을 찾지 못했습니다. 그래서 내가 여기 온거야. – Brendan
어떤 HTML 및 CSS를 사용하고 있습니까? [JS Fiddle] (http://jsfiddle.net/) 또는 [JS Bin] (http://jsbin.com/)에서 라이브 데모를 게시 할 수 있습니까? –
이미지를 background-position : center right로 배경으로 설정하십시오. –