<li> 사이에 줄바꿈이 있는 경우

Question

다음으로 구성된 가로 메뉴가 있습니다. <li> 요소 display: inline.

요소는 서로 원활하게 나란히 있어야 합니다.

소스 코드에서는 디버깅을 더 쉽게 하기 위해 각 li을 한 줄에 표시하고 싶습니다.

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

그러나 추가하면 \n 각 요소 뒤에는 메뉴 항목 사이에 간격이 있습니다.나는 이것이 의도된 동작이라고 생각합니다. 그러나 영리한 "공백" 설정 등을 사용하여 이를 끌 수 있는 방법이 있습니까?

편집하다:부동 소수점을 사용할 수 없습니다. 이것은 목록 항목을 중앙에 배치하는 옵션이 있는 CMS에 있습니다.

Answer 1

렌더링 문제를 피할 수 있지만 다음과 같이 코드를 유지 관리 가능하게 유지할 수 있습니다.

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

공백을 제거하지만 CMS가 입력한 마크업을 손상시키지 않는다면 텍스트 편집기에서 항목을 쉽게 편집할 수 있습니다!

Answer 2

CSS를 편집 할 수있는 기능이 있습니까? 그렇다면 패딩/마진을u003Cli> 요소. 가독성의 많은 노력 인 것 같습니다.

사용중인 브라우저에 따라 HTML Quice를 얻을 수 있습니다. http://users.skynet.be/mgueury/mozilla/, 이는 소스를 정리할 수있는 옵션을 제공하며 디버깅에 충분할 수 있습니다.

Answer 3

CSS+Float는 친구입니다.

Answer 4

HTML은 공백 독립적이므로 라인 브레이크를 추가하는 데 영향을 미치지 않아야합니다. 그러나 일부 브라우저의 렌더링 엔진은 이것을 제대로 얻지 못합니다.

아마도 당신이하고 싶은 것은 추가하는 것입니다

float: left;

당신의 LI 태그에 서로 옆에 가져 오십시오.