2011-08-09 6 views
0

このテーブル行が1ピクセルオフになっているのはなぜですか?ここでこのCSSは1pxのように見えますか?

は、デバッガのブレークPIC、XHTML、CSSです。

は基本的に私は450ピクセルに自分のx寸法を設定します。しかし、一列でこれが気に入らず、テーブル全体が壊れてしまいます。 449 pxに設定すると問題が解決されます。

は、私はまだ105pxから150ピクセルにUDATE私の列幅にする必要があります。

明らか449pxに設定するには、問題を解決しますが、私は理由を知っている必要がありますか?黒魔術?

break pic

<div class="Ab1_2"> 
    <form enctype="multipart/form-data" id="f0" method="post" action=""> 
    <div class="t1"> 
     <div class="t1_r1"> 
     <div class="t1_c1"><p class="c">Email</p></div> 
     <div class="t1_c1"><p class="c">Password</p></div> 
     <!-- <div class="t1_c2"><p class="c">Coming Soon <input class="cb" type="checkbox" name="f0a" value="value1"/></p></div> --> 
     </div> 
     <div class="t1_r2"> 
     <div class="t1_c1"><input class="te6" type="text" name="f0b"/></div> 
     <div class="t1_c1"><input class="te6" type="password" name="f0c"/></div> 
     <div class="t1_c2"><a id="f0d" href="javascript:void(0)" class='but'>Login</a></div> 
     </div> 
     <div class="t1_r3"><span id="f0e"></span> 
     </div> 
    </div> 
    </form> 
</div> 

CSS

.t1 
    { 
    height:62px; 
    width:450px; 
    } 
.t1_r1 
    { 
    height:15px; 
    width:450px; 
    } 
.t1_r2 
    { 
    height:32px; 
    width:449px; 
    } 
.t1_r3 
    { 
    height:17px; 
    width:450px; 
    } 
.t1_c1 
    { 
    width:150px; 
    float:left; 
    } 
.t1_c2 
    { 
    width:105px; 
    float:left; 
    } 
input.te6 
    { 
    padding-top:5px; 
    width:130px; 
    height:20px; 
    border:1px solid #bbbbbb; 
    font-size:12px; 
    } 
+0

デモ:あなたが検討するフィドルの実際のHTMLとCSSを掲載場合http://jsfiddle.net/userdude/XPgVd/ –

+2

それはおそらくよりよく機能するであろう。 –

答えて

2

これは、あなたが取得している "正しくない" レイアウトです:

[Row1Col1][Row1Col2] 
        [Row2Col1] 
[Row2Col2][Row2Col3] 

あなたが設定したとき、あなたがそれを見ていない理由行2の幅を449pxに設定すると、[Row2Col1]要素は[Row1Col1]と同じ行にははや適合しなくなり、[R ow1Col2]要素を含む。新しい行を開始するとき

塗りつぶし各セルを有する行、又はより好ましく、フロートをクリアします。

関連する問題