인라인 목록 항목 사이의 공백을 관리하는 가장 좋은 방법

StackOverflow https://stackoverflow.com/questions/241512

문제

내 HTML은 다음과 같습니다.

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

그리고 내 CSS:

#nav {
    display: inline;
}

그러나 li 사이의 공백이 나타납니다.다음과 같이 공백을 축소하여 공백을 제거할 수 있습니다.

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

그러나 이것은 주로 손으로 유지 관리되고 있으며 이를 수행하는 더 깔끔한 방법이 있는지 궁금합니다.

도움이 되었습니까?

해결책

여기에는 몇 가지 옵션이 있습니다. 먼저 인라인 목록을 만들 때 일반적인 방법을 알려 드리겠습니다.

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

그런 다음 CSS를 사용하여 의도한 대로 작동하게 만듭니다.

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

분명히 hover 및 active 세트는 생략했지만 이는 멋진 블록 수준 탐색을 생성하고 표준을 유지하면서 이 작업을 수행하는 매우 일반적인 방법입니다./* 원하는 대로 조정하고 배경에 색상을 추가하는 등의 작업을 기억하세요 */

텍스트로만 유지하고 인라인으로 유지하려면 블록 요소를 추가하지 않는 것이 좋습니다.

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

공백을 제거하고 싶다면 그에 따라 여백/패딩을 조정하세요.

다른 팁

공백을 제거하는 또 다른 유용한 방법은 목록을 설정하는 것입니다. font-size 속성 0 그리고 목록 요소는 필요한 크기로 돌아갑니다.

당신이 정말로 원하는 것은 CSS3입니다 흰색 공간-콜랩스 : 버려집니다. 그러나 브라우저가 실제로 해당 속성을 지원하는지 확실하지 않습니다.

몇 가지 대안 솔루션은 태그의 꼬리 끝이 공백을 소비하도록하는 것입니다. 예를 들어:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

내가 본 또 다른 것은 HTML 주석을 사용하여 공백을 소비하는 것입니다.

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

플로트를 사용하여 괜찮은 경우이 MAT의 솔루션을 참조하십시오. 요구 사항에 따라 후행을 추가해야 할 수도 있습니다. <li> 그것은 설정됩니다 clear: both;.

그러나 CSS3 속성은 아마도 베스트 이론적 인 방법.

목록 항목에 대한 더 나은 솔루션은 다음과 같습니다.

#nav li{float:left; width:auto;}

두통없이 정확히 동일한 시각적 효과가 있습니다.

비 XML 기반 HTML을 채택하고 생략하십시오 </li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

그런 다음 항목의 디스플레이 속성을 인라인 대신 인라인 블록으로 설정하십시오.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

문제는 UL의 글꼴 크기입니다. 그것을 0으로 설정하면 사라지지 만 실제 텍스트가 너무 작게 설정되기를 원하지 않으므로 Li Font 크기를 원하는대로 설정하십시오.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

나는 같은 문제가 있었고 위의 솔루션 중 어느 것도 문제를 해결할 수 없었습니다. 그러나 나는 이것이 나에게 효과가 있음을 알았다.

대신 :

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

이와 같은 HTML 코드를 빌드합니다 (링크 텍스트 전후에 공백) : 

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top