0

I have a variable number of links I want to write to a page programatically. I would rather not have a single long list, but tabulate the links in one or more columns. However I don't want to force a table with a specific number of columns... rather I want to specify the column width (or let each column auto-fit to the widest element).

Is this achievable using regular HTML/CSS? For reference I'm doing this in C# (.NET2) but if anyone wants a bash at code, any pseudo is fine - input is simply an array/list of strings I want to write to the page.

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

这是您可以做到的一种方法：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 回答