css - 是否设置容器宽度：0 和子显示：内联块太hacky 一种在垂直列表中获得合适的 div 的方法？

Question

目标：保持 div 适合视口大小的内容，尽量减少垂直或水平样式列表。

这 CSS/HTML 是不是太 hack 了？我希望它是最好的，也是最少的（写作量）：

.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/

Answer 1

它对我来说看起来很丑，我不建议这样做。如果您无法修改标记以使用列表，则可以display: table改用。出于您的目的，它的作用类似于 inline-block ，但强制元素在自己的行上，您可以删除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;
}