0

プログラムでページに書き込みたいリンクの数は可変です。長いリストを1つではなく、1つ以上の列にリンクを表にします。ただし、特定の列数のテーブルを強制したくはありません...むしろ、列幅を指定したい（または各列を最も広い要素に自動調整させたい）。

これは通常のHTML/CSSを使用して達成できますか？参考までに、これはC＃（.NET2）で行っていますが、コードでbashが必要な場合は、任意の疑似値で問題ありません。入力は、ページに書き込みたい文字列の配列/リストです。

4

2 に答える 2

2

インラインリストを利用できます。各アイテムの幅が固定されている水平リストについて考えてみてください。

link1.....link2.....link3.....link4.....
link5.....link6.....link7.....link8.....
link9.....link10....link11....

等々。必要なのは、リスト（ul）をインライン化してから、各アイテム（li）を固定幅にすることです。

これは、Twitter Bootstrapを使用した実際のデモです（概念は同じです）：http：//jsfiddle.net/FXkYr/

Twitter Bootstrapを使用したくない場合は、次のHTMLとCSSを使用する必要があります。

HTML：

<ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
</ul>

CSS：

ul {
  margin-left: 0;
  list-style: none;
}

li {
  width: 100px;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  /* The following two lines is because IE is funny... */
  *display: inline;
  *zoom: 1;
}
于 2013-02-12T13:07:35.057 に答える
1

これがあなたがそれをすることができる1つの方法です：http：//jsfiddle.net/vYtBM/

公平を期すために、さまざまな方法でそれを行うことができます。各LI内にアンカータグがある順序付けられていないリストを経由するのも別の方法です。

<div class="container">
    <a href="#">Link #1</a>
    <a href="#">Link #2</a>
    <a href="#">Link #3</a>
    <a href="#">Link #4</a>
    <a href="#">Link #5</a>
    <a href="#">Link #6</a>
    <a href="#">Link #7</a>
    <a href="#">Link #8</a>
    <a href="#">Link #9</a>
</div>

.container {
    overflow: hidden;
    width:960px;
}

.container a {
    display: inline-block;
    width: 440px;
    padding: 10px;
    background: #ccc;
    margin: 0 20px 20px 0;
    float: left;
}
于 2013-02-12T13:05:08.117 に答える