디스플레이 : 인라인 블록 문제

내 코드에서 display : inner-block을 사용하고 있습니다. 그러나 인라인 블록은 divs 사이에 자동으로 패딩을 할당하여 내 사이트에서 브라우저 비 호환성을 일으키고 있습니다. 어느 누구도 솔루션을 지적 할 수 있습니까? 여기디스플레이 : 인라인 블록 문제

당신이 명확하게 패딩 내부 블록 속성으로 할당 볼 수있는 기본 reference.Here의 바이올린

http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq

이 바이올린

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 


div{ 
border:1px solid #000 
} 

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
}

감사에서 참조하는 기본 코드입니다,

출처

2013-12-16 Maclean Pinto

인라인 블록은 자동으로 여백을 추가하지 않습니다. inl입니다. 즉, 각 요소 사이의 공백을 알아 차리는 것을 의미합니다. 이것은 4px 정도의 마진처럼 보일지라도, 그것은 하나의 공간입니다. ,

<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>

또 다른 공백 주석 : 한 가지 방법은 공백을 제거하는 것입니다 라운드 얻을 수

<div class = "LabelColumn">asdfasdf</div><!-- 
--><div class = "LabelColumn">asdfasdf</div>

JSFiddle

또는 마지막으로,하지만 최소한 의미없이, float:leftdisplay 유형을 변경하는 대신

JSFiddle

출처

2013-12-16 09:48:24 George

+1 : 그것에 나를 이길 :) – NoobEditor

을 나는 이것에 대해 읽었다. 어떻게 잊을 수 있니? 이것으로 5 시간을 낭비했습니다. Thanks Mate –

도움이 된 것을 기쁘게 생각합니다. – George

기본적으로 4px의 오른쪽 여백이 있습니다 (font-size 상위 항목에 따라 다름).

이 문제는 CSS를 통해 해결할 수 있습니다. 그것은 내가 더 자주 사용하는 솔루션이며,이 정렬을 조정하는 쉬운 방법입니다.

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -4px; 
}

이 링크를 더 개조하면 되겠 어를 볼 수 있습니다

출처

2013-12-16 09:50:21 jbr

내가 언급 한 CSS-Tricks 기사를 읽는 것이 좋습니다 - 나는 또한 그것을 읽었으며 매우 도움이됩니다. +1. – keaukraine

http://css-tricks.com/fighting-the-space-between-inline-block-elements/은 또한 당신이 0에 컨테이너의 font-size을 설정하고 부동 요소에 필요한 font-size을 설정할 수 있습니다. 이렇게하면 공백이 없어집니다. 요소 사이에 공백을 넣을 수없는 경우에 유용합니다 (예 : 일부 IDE는 마크 업을 자동으로 다시 포맷하도록 구성 할 수 있음).

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

데모 : http://jsfiddle.net/keaukraine/htAR6/2/

출처

2013-12-16 09:59:43 keaukraine

이 시도 :

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

출처

2013-12-16 10:14:03

디스플레이 : 인라인 블록 문제

답변

관련 문제