13

HTML要素ではなくCSSのみで垂直レイアウトを実装することは可能ですか？

1つのdiv内にdivのリストがあります。デフォルトでは、次の要素は最後まで右にあり、右側に場所がない場合は、下に配置されます。

CSSスタイルの設定でも同じことを実現したいと思います。出来ますか？

CSS-つまり、divとその子があり、次のような特別なものは追加しません。

  • 改行要素（<br/>, <div style="clear:both;"/>）
  • ULタグ
  • テーブル（はい、まだ使用されています、fg JSFはほとんどそれらに基づいています）

それで：

<div id="menu">
  <a href="something1">Page 1</a>
  <a href="something2">Page 2</a>
  <a href="something3">Page 3</a>
</div>

そして垂直レイアウトを実装するCSS：

#menu { ??? }
#menu a { ??? }

ありますか ？？？私が望むことを達成するために使用できることは？

4

4 に答える 4

18

アンカー タグをブロック要素として表示します。

#menu a {
display: block;
}
于 2013-02-13T12:17:04.757 に答える
3

このようなことを意味しますか？

http://jsfiddle.net/7Y9jS/

#menu {
    width: 300px;
}

#menu a {
    display: block;
    background: #ccc;
    color: #000;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 2px;
}


<div id="menu">
  <a href="something1">Page 1</a>
  <a href="something2">Page 2</a>
  <a href="something3">Page 3</a>
</div>
于 2013-02-13T12:17:42.013 に答える
1

表示ブロックを

#menu a {
    display: block;
}
于 2013-02-13T12:20:24.793 に答える
1

フロート左を使用

#menu a {
    float:left;
}

次に、クラス グループを #menu に追加します。

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
于 2013-02-13T12:22:37.577 に答える