1

これは私が取り組んでいるコードです:

http://jsfiddle.net/BTYA7/

ツールバー (青) がテキスト ボックスの右側を越えて伸びている理由がわかりません。パディングやマージンのミスはないようです。

見やすくするために青とピンクで適用しました。

.uEditorToolbar {background-color: blue;}

誰でもガイダンスを教えてもらえますか？

4

4 に答える 4

3

uEditorToolbar には、余分な 2 ピクセルのパディングがあります。width:100%パディングを含まない幅を設定します。パディングが必要な場合は、 を削除できますwidth:100%。青いバーは伸びすぎません。

それはあなたが必要とするものですか、それとも私は何かが足りないのですか。

于 2012-10-29T14:11:10.073 に答える
1

CSS 標準で指定されている既定のレイアウト スタイルは、幅と高さのプロパティがコンテンツのみを含めて測定され、境界線、マージン、またはパディングは含まれないことを意味します。したがって、 と の組み合わせによりwidth:100%、padding: 0 0 0 2px;コンテンツが 2px 押し出されます。

のデフォルトの表示<ul>はブロックなので、width:100%おそらく必要ありません。

width:100%またはを削除するpadding-leftと、問題が解決します。

または、CSS3box-sizingプロパティを使用してレイアウトを修正することもできますbox-sizing: border-box;(ターゲットにしているすべてのブラウザーがプロパティをサポートしている場合)。

于 2012-10-29T14:11:51.050 に答える
1

CSS クラスwidth:100%; padding: 2px;から削除します。.uEditor .uEditorToolbarそれが動作します。

于 2012-10-29T14:21:35.567 に答える
1

2px のパディングがあるようです。パディングを取り除くと、問題ないように見えます。

.uEditor .uEditorToolbar
{
    list-style: none;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 0 0 2px;
}

http://jsfiddle.net/BTYA7/5/

于 2012-10-29T14:18:29.407 に答える