CSS : ul 's vs. div floating left on one ine

Question

시나리오는 클라이언트가 텍스트를 감싸는 텍스트가있는 부유 자리 (회색 상자)를 원한다는 것입니다. 그러나이 텍스트 중 일부에는 IE6의 부유 식 DIV 뒤에 숨어있는 UL과 OL이 포함됩니다.

나는 그것이 도움이 될지 확인하기 위해 ul 's를 div로 포장하려고 시도했지만 실패했습니다. 전에이 문제를 경험하고 적절한 솔루션을 찾은 사람이 있습니까?

(참고 : 이것은 레이아웃 내에서 다른 많은 것을 수정할 수있는 능력이 제한적인 오래된 사이트입니다)

Answer 1

나는 당신이 LI를 수정하여 외부 대신 총알을 내부에 표시하기 위해 수정할 수 있다고 생각합니다.

ul {
   list-style-position: inside;
}

Answer 2

그러나이 텍스트 중 일부에는 IE6의 부유 식 DIV 뒤에 숨어있는 UL과 OL이 포함됩니다.

우리가 이것만큼 간단한 말을하고 있다면 :

<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
    <li>potato</li>
    <li>yoghurt</li>
</ol>

그런 다음 여기서 일어나는 일은 IE뿐만 아니라 모든 브라우저에서 발생합니다. 이 예제의 경계에서 볼 수 있습니다. 목록의 왼쪽 패딩은 플로트 뒤에서 발생하여 목록 내용을 오른쪽으로 더 밀지 않습니다. 플로트는 블록 요소가 아니라 라인 상자에 항목 만 격퇴하기 때문입니다.

빠른 해킹 해결 방법을 원한다면u003Cul> 안에u003Cdiv> 스타일 '디스플레이 : 인라인 블록'.

Answer 3

플로팅 + IE6은 항상 의도하지 않은 고통과 고통의 원인입니다. 몇 가지 간단한 수정 사항 :

1. 플로팅 상자에 더 많은 여백을 추가하십시오
2. UL/OL에 왼쪽 여백을 추가하십시오