일반 텍스트 단락과 함께 이미지를 띄우는 (XHTML Strict) 페이지가 있습니다. 단락 대신 목록을 사용하는 경우를 제외하고는 모두 잘 진행됩니다. 목록의 글 머리 기호가 부동 이미지와 겹칩니다.

목록의 여백이나 목록 항목을 변경해도 도움이되지 않습니다. 여백은 페이지 왼쪽에서 계산되지만 부동 소수점은 목록 항목을 자체 내부 의 오른쪽으로 푸시합니다 li. 따라서 여백은 이미지보다 넓게 만드는 경우에만 도움이됩니다.

이미지 옆에 목록을 플로팅해도 작동하지만 목록이 플로트 옆에 언제 있는지 모르겠습니다. 이 문제를 해결하기 위해 콘텐츠의 모든 목록을 띄우고 싶지 않습니다. 또한 떠 다니는 왼쪽은 이미지가 목록의 왼쪽 대신 오른쪽으로 떠오를 때 레이아웃을 엉망으로 만듭니다.

설정 li { list-style-position: inside }하면 글 머리 기호가 내용과 함께 이동하지만 줄 바꿈이 위 줄과 일치하지 않고 글 머리 기호와 정렬되기 시작합니다.

총알이 상자 바깥쪽으로 렌더링되고 상자의 내용물이 상자 자체가 아닌 오른쪽으로 상자의 내용물을 밀어 넣음으로써 문제가 발생합니다. 이것은 IE와 FF가 상황을 처리하는 방법이며, 내가 아는 한 사양에 따라 잘못되지 않았습니다. 문제는 어떻게 방지 할 수 있습니까?

답변

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

.img {
  float: left;
}

.table {
  display: table;
}

<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

position: relative;
left: 1em;

ul {overflow: hidden;}