如何使HTML网格调整大小以适合页面宽度？ [英] How to make an HTML grid which resizes to fit page width?

问题描述

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

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).

这是可以使用常规的HTML / CSS吗？作为参考我在C＃（.NET2），但如果任何人想要一个bash的代码，任何伪是很好 - 输入只是一个数组/列表我想写入页面的字符串。

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.

推荐答案

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

You can make use of an inlined list. Think about an horizontal list where each item has a fixed width.

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

等等。所有你需要的是使你的列表（ ul ）内联，然后每个项目（ li ）具有固定宽度。

And so on. All you need is to make your list (ul) inlined then each item (li) to have a fixed width.

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

Here is a working demo using Twitter Bootstrap (the concept is the same): http://jsfiddle.net/FXkYr/

如果您不想使用Twitter Bootstrap 这里是相关的HTML& CSS您需要使用：

In case you don't want to use Twitter Bootstrap here are the relevant HTML & CSS you will need to use:

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;
}

这篇关于如何使HTML网格调整大小以适合页面宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！