2

作業中のサイトをレスポンシブにするために、すべての幅とマージン、およびパディングをパーセンテージに変換しようとしています。問題のないヘッドダーまで到達しましたが、今は行き詰まっています。

liアイテムのパディングを変更すると、レイアウトが壊れます。フルサイトでは、パディングは6pxである必要がありますが、パディングをパーセンテージに設定した場合でも、0.1％と小さくても、要素の1つがぶつかります。このサイトは公開されていませんが、いくつかのスクリーンショットといくつかのコードが含まれています。何か案は？

aside#footer-brands ul  {
margin:0;
padding:0;
}

aside#footer-brands ul li {
padding:6px;
float:left;
list-style: none;   
}

aside#footer-brands ul li a {
background-image: url(/images/csr/footer/brands/sprite-brands.png);
background-repeat:  no-repeat;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

<aside id="footer-brands">
            <h6>Our Brands</h6>
            <ul>
                <li><a class="keurig-logo" href="http://www.keurig.com">Keurig</a></li>
                <li><a class="gmcr-logo" href="http://www.greenmountaincoffee.com">Green Mountain Coffee</a></li>
                <li><a class="tullys-logo" href="http://www.tullys.com">Tullys</a></li>
                <li><a class="timothys-logo" href="http://www.timothys.com">Timothys</a></li>
                <li><a class="diedrich-logo" href="http://www.diedrich.com">Diedrich</a></li>
                <li><a class="vanhoutte-logo" href="http://www.keurig.com/shop/k-cups/all-k-cups?hdnCategoryFacets=Brand:Van%20Houtte&hdnBaseFacets=Brand">Van Houtte</a></li>
            </ul>
</aside>

最初の質問なので画像を投稿できませんが、これがどのように見えるかです...

https://img.skitch.com/20120514-ng553b28ana6khsss619cag72e.jpg

パディングをパーセントに変更したときの外観...

https://img.skitch.com/20120514-j94cgs2g8dppktcacbns3jmig2.jpg

URLを追加するために編集：

あなたはhttp://nightowlsrock.com/3-col.htmlでページを見ることができます

4

2 に答える 2

0

CSS3フレックスボックスを試しましたか？パーセンテージは必要ありません（比率だけで、ブラウザが幅をネイティブに処理します）。また、物事が常に同じ線上にあることを保証します（フロートのようにぶつかることはありません）。

http://www.html5rocks.com/en/tutorials/flexbox/quick/

特にパディングに関しては、ほとんどのブラウザで1px未満の幅の問題があると思います。したがって、「ピクセルパーフェクト」にしたい場合は、メディアクエリで固定ピクセル幅を使用してこれを実現する必要があります。しかし、私は通常、フレックスボックスで物事を「十分に近づける」ことができることを発見しました。

于 2012-05-31T20:01:55.370 に答える
0

編集：前に言ったことを無視してください。

パディングに関するW3Cページは言う

割合は、'padding-top' および 'padding-bottom' の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトは CSS 2.1 で定義されていません。

はい、未定義の動作が表示されます。.8%値を、などに設定することで、非常に異なる結果を生成できます。したがって、答えは1%、 最初に UL を所定の幅に設定する必要があるようです。1.2%

于 2012-05-16T17:09:58.237 に答える