CSS 들여 쓰기가 모든 브라우저에서 작동하지 않을 때 어떻게 수정합니까?

Question

나는 다음과 같은 디자인을 만들 필요가 : 운명과 오염 물질의 운송 모델링

Total Maximum Daily Load, EPA 

• 총 일일 최대 부하 (TMDL) 개발

는 "전체를 참조로 최대 일일로드 "는 총알 포인트"모델링 .. "및"총 .. "과 정렬되어야합니다.

필요한 정렬은 인터넷 익스플로러와 파이어 폭스에 표시하지만,

Total Maximum Daily Load, EPA 

• 는 운명과 오염 물질의 운송 모델링 아래로 크롬에서 보여줍니다
• 총 일일 최대 부하 (TMDL) 개발

"총 최대 일일로드"는 글 머리 기호의 "모델링"및 "전체"와 정렬되지 않습니다. 왜 다른 브라우저에서 작동하지 않습니까? 이 들여 쓰기 브라우저를 어떻게 독립적으로 만들 수 있습니까?

Answer 1

가장 간단한 해결 방법은 첫 번째 텍스트를 목록의 항목을 만들 아마도 있지만 총알이없는 :

이

<ul> 
<li style="list-style: none">Total Maximum Daily Load, EPA 
<li>Modeling the Fate and Transport of Pollutants 
<li>Total Maximum Daily Load (TMDL) Development 
</ul> 

대안 솔루션은 여기 (ul 및 li에서의 브라우저 차이를 모든 마진과 패딩을 제거하는 것입니다 그 문제를 일으키는) 다음 왼쪽 된 여백을 ul 및 첫 번째 텍스트에서 동일한 왼쪽 여백을 설정하십시오. 이렇게하면 기본 수직 여백이 ul에서 제거되므로 왼쪽 여백 값을 조정하는 것 외에도 추가 할 수 있습니다. (1.3em 정도의 값이 아마 목록 총알에 맞는 있다는 점에서 안전 작은 안전 값입니다.) 목록 스타일 위치에

<style> 
ul, li { 
    margin: 0; 
    padding: 0; 
} 
ul, .list-header { 
    margin-left: 1.3em; 
} 
</style> 
<div class="list-header">Total Maximum Daily Load, EPA</div> 
<ul> 
<li>Modeling the Fate and Transport of Pollutants 
<li>Total Maximum Daily Load (TMDL) Development 
</ul>