2017-12-20 8 views
0

私の子divクラスが親divクラスから外れる理由は誰にも分かりますか?私は何が間違っているのか分からない!子divは親divの外に出る

フィドルとコードがリンクされています。

ありがとうございました!

https://jsfiddle.net/cqynLsqu/

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

.table { display: table; } 
 
.row { display: table-row; } 
 
.cell { display: table-cell; }
<div style="border: 1px #000 solid; width: 100%;"> 
 
\t <div style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t 0 
 
\t </div> 
 

 
\t <div style="width: 100%; margin: 5px;"> 
 
\t \t text text text text text text text text text text text text text text text text text text 
 
\t </div> 
 

 
\t <div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> \t \t 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="row"> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t 0 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t <b>0</b> 
 
\t \t \t </div> 
 
\t \t \t <div class="cell"> 
 
\t \t \t \t <a href="0">0</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t </div> \t 
 

 
</div>

答えて

1

変更この行:これまで

<div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;"> 

<div class="table" style="width: 100%; margin-right: 5px; border: 1px #000 solid;"> 

margin-leftはコンテンツを送り出しています。

+0

あなたのCSSをすべて同じ場所(スタイルシートや文書の '')に置くと、おそらくあなた自身が間違っていたことを考え出したでしょう。 –

+0

私のテーブルと親の境界の間に余白を置く方法はありませんか? –

関連する問題