0

別の div にネストされた 3 つの div があります。3 つの div には css display:inline:block があるため、フローティングのように動作しますが、マージンまたはパディングがあるかのように各 div 間にギャップがあります。

HTML は次のとおりです。

    <div id="lowerContentHeaderContainer">
      <div id="borderLowerContentL"></div><!-- borderLowerContentL -->
      <div id="textLowerContentM">some title goes here</div><!-- textLowerContent -->
      <div id="borderLowerContentR"></div><!-- borderLowerContentR -->
    </div><!-- lowerContentHeaderContainer -->

CSSは次のとおりです。

#lowerContentHeaderContainer {
position:relative;
width:746px;
text-align:center;
}
#borderLowerContentL {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_01.png);
background-repeat:no-repeat;
border:1px solid #000;
}
#textLowerContentM {
position:relative;
display:inline-block;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_02.png);
background-repeat:repeat-x;
border:1px solid #000;
}
#borderLowerContentR {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_04.png);
background-repeat:no-repeat;
border:1px solid #000;
}

ここに画像の説明を入力

ネストされた div の周りに境界線が追加されているので、私が話していることがわかります。また、中央の div は本来あるべきように水平方向に配置されていません。

div 間のスペースを取り除き、中央の div を適切に配置する方法はありますか?

4

1 に答える 1

0

ブラウザーは、改行が浮動していない限り、改行をスペースとして認識します。

html

<div id="lowerContentHeaderContainer"><div id="borderLowerContentL">&nbsp;</div><div id="textLowerContentM">some title goes here</div><div id="borderLowerContentR">&nbsp;</div></div>​

http://jsfiddle.net/kudoslabs/CTpYH/

于 2012-11-17T09:39:40.463 に答える