并排列表项作为 div (css) 中的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/827683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Side-by-side list items as icons within a div (css)
提问by Brian David Berman
I am looking for a way to create a <ul>of items that I can put within a <div>and have them show up side-by-side and wrap to the next line as the browser window is resized.
我正在寻找一种方法来创建一个<ul>可以放在a 中的项目，<div>并让它们并排显示并在调整浏览器窗口大小时换行到下一行。
For example, if we have 10 items in the list that currently show 5 items on the first row and 5 items on the second row, as the user makes the browser window wider, it turns into 6 items on the first row and 4 items on the second row, etc.
例如，如果列表中有 10 个项目，当前在第一行显示 5 个项目，在第二行显示 5 个项目，随着用户将浏览器窗口变宽，它会变成第一行 6 个项目和 4 个项目第二行等
I am looking for similar functionality to what Windows Explorer does when in tiles/icons/thumbnails view. I am able to create the <li>'s I want as far as the size, color, content, etc. I am just having trouble with the wrapping/clearing/etc. part.
我正在寻找与 Windows 资源管理器在磁贴/图标/缩略图视图中所做的类似的功能。我能够创建<li>我想要的大小、颜色、内容等。我只是在包装/清除/等方面遇到问题。部分。
回答by Itay Moav -Malimovka
give the LI float: left (or right)
给 LI 浮动：左（或右）
They will all be in the same line until there will be no more room in the container (your case, a ul). (forgot): If you have a block element after the floating elements, he will also stick to them, unless you give him a clear:both, OR put an empty div before it with clear:both
它们都将在同一行中，直到容器中没有更多空间（您的情况，一个 ul）。（忘记了）：如果你在浮动元素之后有块元素，他也会粘住，除非你给他一个clear:both，或者在它前面放一个空的div 用clear:both
回答by johnvey
This can be a pure CSS solution. Given:
这可以是纯 CSS 解决方案。鉴于：
<ul class="tileMe">
<li>item 1<li>
<li>item 2<li>
<li>item 3<li>
</ul>
The CSS would be:
CSS 将是：
.tileMe li {
display: inline;
float: left;
}
Now, since you've changed the display mode from 'block' (implied) to 'inline', any padding, margin, width, or height styles you applied to li elements will not work. You need to nest a block-level element inside the li:
现在，由于您已将显示模式从“块”（隐含）更改为“内联”，因此您应用于 li 元素的任何填充、边距、宽度或高度样式都将不起作用。您需要在 li 中嵌套一个块级元素：
<li><a class="tile" href="home">item 1</a></li>
and add the following CSS:
并添加以下 CSS：
.tile a {
display: block;
padding: 10px;
border: 1px solid red;
margin-right: 5px;
}
The key concept behind this solution is that you are changing the display style of the li to 'inline', and nesting a block-level element inside to achieve the consistent tiling effect.
此解决方案背后的关键概念是您将 li 的显示样式更改为“内联”，并在内部嵌套块级元素以实现一致的平铺效果。
回答by TonyArra
Here's a good resource for wrapping columned lists. http://www.communitymx.com/content/article.cfm?cid=27f87
这是用于包装分列列表的好资源。 http://www.communitymx.com/content/article.cfm?cid=27f87
回答by mlunoe
I would recommend that you use display: inline;. floatis screwed up in IE. Here is an example of how I would approach it:
我建议您使用display: inline;. float在 IE 中被搞砸了。这是我将如何处理它的示例：
<ul class="side-by-side">
<li>item 1<li>
<li>item 2<li>
<li>item 3<li>
</ul>
and here's the css:
这是CSS：
.side-by-side {
width: 100%;
border: 1px solid black;
}
.side-by-side li {
display: inline;
}
Also, if you use floats the ulwill not wrap around the li's and will instead have a hight of 0 in this example:
此外，如果您使用浮点数，ul则不会环绕li's，而是在此示例中的高度为 0：
.side-by-side li {
float: left;
}
回答by Adam Cramp
I used a combination of the above to achieve a working result; Change float to Left and display Block the li itself HTML:
我使用了上面的组合来实现一个工作结果；将 float 更改为 Left 并显示 Block li 本身的 HTML：
<ol class="foo">
<li>bar1</li>
<li>bar2</li>
</ol>
CSS:
CSS：
.foo li {
display: block;
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 2px;
}
回答by Pran
add this line in your css file:
在你的 css 文件中添加这一行：
.classname ul li {
float: left;
}
回答by mattphp
Use the following code to float the items and make sure they are displayed inline.
使用以下代码浮动项目并确保它们内联显示。
ul.myclass li{float:left;display:inline}
ul.myclass li{float:left;display:inline}
Also make sure that the container you put them in is floated with width 100% or some other technique to ensure the floated items are contained within it and following items below it.
还要确保您将它们放入的容器以 100% 的宽度浮动或其他一些技术，以确保浮动项目包含在其中并跟随其下方的项目。
