인라인 블록 목록 항목 사이의 공백

인라인 블록 목록 항목 사이의 공백

이 질문에는 이미 다음과 같은 답이 있습니다.

인라인/인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? (41개 답변)

마감됨8년 전에.

중복 가능성:
인라인 차단 목록 항목의 원하지 않는 여백
HTML에서 "보이지 않는 공간"을 제거하는 방법

왜 그럴까요?inline-block목록 항목에 공백이 있습니까?목록 항목을 메뉴로 만드는 방법에 상관없이 항상 공백이 생깁니다.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}

ul {
  padding: 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

저는 이것을 보고 전에 대답한 적이 있습니다.

더 많은 연구 후에 저는 그것을 발견했습니다.inline-block는 공백 종속 메서드이며 글꼴 설정에 따라 다릅니다.이 경우 4px가 렌더링됩니다.

이 문제를 방지하기 위해 당신은 당신의 모든 것을 실행할 수 있습니다.li다음과 같이 한 줄로 묶거나 끝 태그를 차단하고 태그를 함께 시작합니다.

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

예를 들어 보겠습니다.

---

다른 답변과 댓글에서 언급했듯이, 이 문제를 해결하기 위한 최선의 방법은 다음과 같습니다.font-size: 0;상위 요소로:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

이것은 HTML 가독성을 위해 더 좋습니다(태그를 함께 실행하는 것을 피함).간격 효과는 글꼴의 간격 설정으로 인해 발생하므로 인라인된 요소에 대해 글꼴을 재설정하고 내용에 대해 다시 설정해야 합니다.

솔루션:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

상위 글꼴 크기를 0으로 설정해야 합니다.

아래와 같이 float left의 CSS 속성을 추가하겠습니다.그러면 여분의 공간이 없어집니다.

ul li {
    float:left;
}

사실, 이것은 특정한 것이 아닙니다.display:inline-block에도 적용됩니다.display:inline따라서, 이것은 데이비드 호락의 해법 외에도 다음과 같이 작용합니다.

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Gerbus의 솔루션과 유사한 다른 솔루션이지만 상대적인 글꼴 크기 조정에도 사용할 수 있습니다.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

저도 같은 문제가 있었습니다. 제가 메뉴에서 인라인 블록을 사용했을 때, 각각의 "li" 사이에 공간이 있었습니다. 간단한 해결책을 찾았습니다. 어디서 찾았는지 기억이 나지 않습니다. 어쨌든 제가 한 일은 이렇습니다.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

의 양 끝과 시작 사이에 설명 기호를 추가합니다. "li" 그러면 수평 공간이 사라집니다.질문에 대한 대답을 바랍니다. 감사합니다.

그렇지 않아도inline-block이 솔루션을 기반으로 하면 고려할 가치가 있을 수 있습니다(상위 레벨에서 거의 동일한 포맷 제어 기능 사용).

ul {
  display: table;
}
ul li {
  display: table-cell;
}

• IE8+ 및 주요 브라우저 호환
• 상대/고정 글꼴 크기 독립
• HTML 코드 형식 독립(접착할 필요 없음)</li><li>)

HTML 코드에서 li 사이의 구분을 제거하면 됩니다. li를 한 줄로만 만들 수 있습니다.

언급URL : https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items