Question

我有一个可变数量的链接，我想以编程方式写入页面。我宁愿没有一个长列表，而是在一列或多列中列出链接。但是我不想强制使用具有特定列数的表...而是我想指定列宽（或者让每列自动适应最宽的元素）。

这是否可以使用常规HTML / CSS实现？作为参考，我在C＃（。NET2）中这样做但是如果有人想在代码上进行bash，那么任何伪都没问题 - 输入只是我要写入页面的数组/字符串列表。

Answer 1

您可以使用内联列表。考虑一个水平列表，其中每个项目都有固定的宽度。

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

等等。您只需要将列表（ul）内联，然后将每个项目（li）设置为固定宽度。

这是一个使用Twitter Bootstrap的工作演示（概念是相同的）：http://jsfiddle.net/FXkYr/

如果您不想使用Twitter Bootstrap ，请参阅相关的HTML＆amp;您需要使用的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;
}

Answer 2

这是你可以做到的一种方式：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;
}

如何使HTML网格调整大小以适应页面宽度？

2 个答案: