0

目的：ビューポートに合わせたサイズのコンテンツにdivを適合させ続けるために、リストを垂直方向または水平方向にスタイル設定するために最小限のことを行います。

ここに画像の説明を入力してください

このCSS/HTMLはハックしすぎていますか？私はそれが最高であり、また最小（書き込みの量）であることを望みます：

.phosphor .vical {
        width:0; /* width 0 means we have a vertical list */
}
.phosphor .hical {
        width:auto; /* auto width means we get a responsive horizontal list */
}
.phosphor .vical a {
        display:inline-block;
}       
.phorphor .hical a {
        display:inline-block;
} 

<div class='phosphor'>
        <div class="vical">
                <a href="#V1">V1</a>
                <a href="#V2">V2</a>
                <a href="#V3">V3</a>
                <a href="#V4">V4</a>
        </div>
        <a href="#H1">H1</a>
        <a href="#H2">H1</a>
</div>

残りのコードとデモはここにあります：http：//jsfiddle.net/SaZUW/1/

4

1 に答える 1

1

それは私には醜いように見えます、そして私はそれをそのようにすることをお勧めしません。リストを使用するようにマークアップを変更できない場合は、代わりに使用できますdisplay: table。それはあなたの目的のためにインラインブロックと同様に機能しますが、要素をそれら自身の行に強制し、あなたは：をドロップすることができwidth: 0ます

http://jsfiddle.net/SaZUW/2/

.phosphor {
    margin:0 auto;
    width:100%;
    height:100%;
    padding:0;
}

.phosphor, .phosphor * {
    font: 5vw'Courier New', Courier, monospace;
    color:transparent;
    background:black;
    text-shadow:0 0 1px lime;
}

.phosphor a {
    text-decoration:none;
}

.phosphor a:focus, .phosphor a:active, .phosphor a:hover {
    outline:none;
    background:lime;
    text-shadow:0 0 1px black;
}

.phosphor .vical a {
    display:table;
}
于 2013-03-17T12:51:07.510 に答える