1

私たちが提供する大学の専攻のリストを印刷しています。次に、各専攻内で、各専攻の集中度を示しています。

私たちの科学専攻は、環境科学と林業、カイロプラクティック、化学、生物学に集中しています。

これが何をしているかのスクリーンショットです： 代替テキスト

スクリーン ショットに表示される間隔は必要ありません (人事管理 AAS と心理学の後に表示される間隔は必要ありません)。

ソースは次のようになります。

.col-middle .majors-list li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 2px;
}

.col-middle ul.majors-list {
  margin-left: 0;
}

.col-middle ul.concentrations-list {
  overflow: auto;
}

.col-middle .concentrations-list li {
  float: none;
}
<ul class="majors-list">
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
</ul>

4

5 に答える 5

1

いくつかのJavaScriptがないと、これを行うことはできません。mozillaまたはwebkitでは、-[moz | webkit] -column-count：2;を使用できます。しかし、それでも、与えられたcssがほぼ提供しているのと同じ解決策は得られません。つまり、順序は水平ではなく垂直になります。column-countプロパティで遊んでいたとき、内部リストも列で分割されていましたが、これも適切ではないと思います。

jqueryのようなフレームワークで非常に簡単に達成できると私が信じているjavascriptソリューションは、おそらく各li要素を取得し、position：relative属性とposition：absolute属性の組み合わせと少しの数学を使用して動的に配置します。

于 2008-11-26T20:22:13.267 に答える
0

float：leftの代わりにfloat：rightを試してください。

これはFirefox2で機能します。他の（多くの）ブラウザでは機能しません。

于 2008-11-26T17:49:03.453 に答える
0

試すことができることの 1 つは、ul.majors-list を次のように表示することです。(またはインラインブロック) および float: left; それはうまくいくかもしれません。

上記は「 ul.majors-list li display: inline;を作成してみてください」のはずです。しかし、私はそれを簡単にいじっているだけではうまくいきません。最上位のulを削除せずに、それぞれを独自のリストにするだけで、これをどのように実行できるかわかりません。

于 2008-11-26T22:49:36.620 に答える
0

const-list クラスdisplay: none;に CSS のプロパティを指定します。次に、クラスをconcentration-list-showingに変更するonclickイベントを指定し、concentments-list-showingクラスをCSSに追加してdisplay: block;プロパティを指定することにより、サブリストの1つを表示できます。

于 2008-11-26T19:00:36.303 に答える
0

CSS3 Columns でこれを行うことができますが、そのブラウザーで動作するにはこれが必要だと思います。

于 2008-11-26T19:07:01.483 に答える