インラインブロック、サイドバイサイドコンテンツホルダ、100％幅の問題

以下の要素が並んで表示されないのはなぜですか？私はwidth: 29%に左を変更することができますが、それは動作しますが、小さなギャップがあります。なぜ彼らは100％まで追加できないのですか？これのための修正はありますか？インラインブロック、サイドバイサイドコンテンツホルダ、100％幅の問題

@media all { 
 
    body,html { 
 
     margin:0; padding:0; 
 
    } 
 
    #content { 
 
     position: absolute; 
 
     width: 8.5in; 
 
     left: 50%; 
 
     margin: 0 0 0 -4.25in; 
 
     padding: 0; 
 
    } 
 
    #left { 
 
     width: 30%; 
 
     display: inline-block; 
 
     background-color: lightgray; 
 
    } 
 
    #right { 
 
     width: 70%; 
 
     display: inline-block; 
 
     background-color: cornflowerblue; 
 
    } 
 
}

<body> 
 
    <div id="content"> 
 
     <span id="left"> 
 
      left 
 
     </span> 
 
     <span id="right"> 
 
      right 
 
     </span> 
 
    </div> 
 
</body>

出典

2017-03-23 Scott Beeson

はinline'物事 'として考えてください。例えば 'p'要素、' h1'、 'h2'、' span'などです。これらの要素は文字であり、文字間には常に小さなスペースがあります。 'inline-block' divでも同じことが起こります。以下はそれを修正する方法の答えです –

インライン要素は、コード内の空白に敏感であるため。だからそれを取り除くだけです。

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    width: 8.5in; 
 
    left: 50%; 
 
    margin: 0 0 0 -4.25in; 
 
    padding: 0; 
 
} 
 

 
#left { 
 
    width: 30%; 
 
    display: inline-block; 
 
    background-color: lightgray; 
 
} 
 

 
#right { 
 
    width: 70%; 
 
    display: inline-block; 
 
    background-color: cornflowerblue; 
 
}

<div id="content"> 
 
    <span id="left"> 
 
      left 
 
     </span><span id="right"> 
 
      right 
 
     </span> 
 
</div>

出典

2017-03-23 19:43:01 j08691

それは変わったようです。ありがとう！ –

これは、要素間のスペースです。

http://codepen.io/themeler/pen/yMENgZ

#content { 
    font-size: 0; 
} 
#left { 
    font-size: 18px; 
} 
#right { 
    font-size: 18px; 
}

それとも、再設定されたフォントサイズにwan'tていない場合は、そのためにfloat Sを使用：あなたは子供のための容器とセットに必要なサイズのためfont-size: 0;を設定することができます。

出典

2017-03-23 19:43:47

<div id="content"> 
     <span id="left"> 
      left 
     </span> 
     <span id="right"> 
      right 
     </span> 
    </div> 



#left { 
      width: 30%; 
      display: inline-block; 
      background-color: lightgray; 
      float:left; 
     } 
     #right { 
      width: 70%; 
      display: inline-block; 
      background-color: cornflowerblue; 
      float:left; 
     }

、彼らがテキストであるかのようにフィドラーhttps://jsfiddle.net/d0r81820/

出典

2017-03-23 19:46:37

インラインブロック、サイドバイサイドコンテンツホルダ、100％幅の問題

答えて

関連する問題