Html CSS 在特定“内联块”项目之前/之后换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4609279/
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
CSS to line break before/after a particular `inline-block` item
提问by Phrogz
Let's say I have this HTML:
假设我有这个 HTML：
<h3>Features</h3>
<ul>
<li><img src="alphaball.png">Smells Good</li>
<li><img src="alphaball.png">Tastes Great</li>
<li><img src="alphaball.png">Delicious</li>
<li><img src="alphaball.png">Wholesome</li>
<li><img src="alphaball.png">Eats Children</li>
<li><img src="alphaball.png">Yo' Mama</li>
</ul>
and this CSS:
和这个CSS：
li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }
The result can be seen here: http://jsfiddle.net/YMN7U/1/
结果可以在这里看到：http: //jsfiddle.net/YMN7U/1/
Now imagine that I want to break this into three columns, the equivalent of injecting a <br>after the third <li>. (Actually doing that would be semantically and syntactically invalid.)
现在想象一下，我想把它分成三列，相当于<br>在第三列之后注入 a <li>。（实际上这样做在语义和语法上都是无效的。）
I know how to select the third <li>in CSS, but how do I force a line break after it? This does not work:
我知道如何<li>在 CSS 中选择第三个，但是如何在它之后强制换行？这不起作用：
li:nth-child(4):after { content:"xxx"; display:block }
I also know that this particular case is possible by using floatinstead of inline-block, but I am not interested in solutions using float. I also know that with fixed-width blocks this is possible by setting the width on the parent ulto about 3x that width; I am not interested in this solution. I also know that I could use display:table-cellif I wanted real columns; I am not interested in this solution. I am interested in the possibility of forcing a break inside inline content.
我也知道这种特殊情况可以通过使用float代替inline-block，但我对使用float. 我也知道对于固定宽度的块，这可以通过将父级的宽度设置ul为大约 3 倍的宽度来实现；我对这个解决方案不感兴趣。我也知道display:table-cell如果我想要真正的专栏，我可以使用；我对这个解决方案不感兴趣。我对在内联内容中强制中断的可能性感兴趣。
Edit: To be clear, I am interested in 'theory', not the solution to a particular problem. Can CSS inject a line break in the middle of display:inline(-block)?elements, or is it impossible?If you are certain that it is impossible, that is an acceptable answer.
编辑：明确地说，我对“理论”感兴趣，而不是对特定问题的解决方案。CSS 可以在display:inline(-block)?元素中间插入换行符，还是不可能？如果您确定这是不可能的，那么这是一个可以接受的答案。
回答by ?ime Vidas
I've been able to make it work on inline LI elements. Unfortunately, it does not work if the LI elements are inline-block:
我已经能够让它在内联 LI 元素上工作。不幸的是，如果 LI 元素是内联块，则它不起作用：
Live demo:http://jsfiddle.net/dWkdp/
现场演示：http ://jsfiddle.net/dWkdp/
Or the cliff notes version:
或者悬崖笔记版本：
li {
display: inline;
}
li:nth-child(3):after {
content: "\A";
white-space: pre;
}
回答by Marcus Whybrow
You are not interested in a lot of "solutions" to your problem. I do not think there really is a good way to do what you want to do. Anything you insert using :afterand contenthas exactly the same syntactic and semantic validity it would have done if you had just written it in there yourself.
您对问题的许多“解决方案”不感兴趣。我不认为真的有什么好方法可以做你想做的事。任何你插入使用:after，并content具有完全相同的语法和语义的有效性，如果你刚写好它有它自己会做。
The tools CSS provide work. You should just float the lis and then clear: leftwhen you want to start a new line, as you have mentioned:
工具 CSS 提供了工作。正如您所提到的，您应该只浮动lis 然后clear: left当您要开始新行时：
See an example: http://jsfiddle.net/marcuswhybrow/YMN7U/5/
回答by fabb
When rewriting the html is allowed, you can nest <ul>s within the <ul>and just let the inner <li>s display as inline-block. This would also semantically make sense IMHO, as the grouping also is reflected within the html.
当允许重写 html 时，您可以将<ul>s嵌套在s 中，<ul>并让内部<li>s 显示为 inline-block。恕我直言，这在语义上也是有意义的，因为分组也反映在 html 中。
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
li li { display:inline-block; }
Demo
演示
$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });h3 {
border-bottom: 1px solid #ccc;
font-family: sans-serif;
font-weight: bold;
}
ul {
margin: 0.5em auto;
list-style-type: none;
}
li li {
text-align: center;
display: inline-block;
padding: 0.1em 1em;
}
img {
width: 64px;
display: block;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
<li>
<ul>
<li><img />Smells Good</li>
<li><img />Tastes Great</li>
<li><img />Delicious</li>
</ul>
</li>
<li>
<ul>
<li><img />Wholesome</li>
<li><img />Eats Children</li>
<li><img />Yo' Mama</li>
</ul>
</li>
</ul>回答by matt
An easy way to split lists into rows is by floating the individual list items and then the item that you want to go to the next line you can clear the float.
将列表拆分为行的一种简单方法是浮动单个列表项，然后将要转到下一行的项清除浮动。
for example
例如
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
回答by chut319
I know you didn't want to use floats and the question was just theory but in case anyone finds this useful, here's a solution using floats.
我知道你不想使用浮点数，这个问题只是理论上的，但如果有人觉得这很有用，这里有一个使用浮点数的解决方案。
Add a class of left to your lielements that you want to float:
向li要浮动的元素添加 left 类：
<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>
and amend your CSS as follows:
并按如下方式修改您的 CSS：
li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}
http://jsfiddle.net/chut319/xJ3pe/
http://jsfiddle.net/chut319/xJ3pe/
You don't need to specify widths or inline-blocks and works as far back as IE6.
您不需要指定宽度或内联块，并且可以追溯到 IE6。
回答by Deji
I accomplished this by creating a ::before selector for the first inline element in the row, and making that selector a block with a top or bottom margin to separate rows a little bit.
我通过为行中的第一个内联元素创建一个 ::before 选择器来实现这一点，并使该选择器成为一个带有顶部或底部边距的块来分隔行。
.1st_item::before
{
content:"";
display:block;
margin-top: 5px;
}
.1st_item
{
color:orange;
font-weight: bold;
margin-right: 1em;
}
.2nd_item
{
color: blue;
}
回答by Phil LaNasa
Note sure this will work, depending how you render the page. But how about just starting a new unordered list?
请注意，这将起作用，具体取决于您呈现页面的方式。但是如何开始一个新的无序列表呢？
i.e.
IE
<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>回答by Vivekraj K R
A better solution is to use -webkit-columns:2;
更好的解决方案是使用 -webkit-columns:2;
http://jsfiddle.net/YMN7U/889/
http://jsfiddle.net/YMN7U/889/
ul { margin:0.5em auto;
-webkit-columns:2;
}
回答by Dustin Poissant
Maybe it's is completely possible with only CSS but I prefer to avoid "float" as much as I can because it interferes with it's parent's height.
也许仅使用 CSS 是完全可能的，但我更喜欢尽可能避免“浮动”，因为它会干扰它的父级高度。
If you are using jQuery, you can create a simple `wrapN` plugin that is similar to `wrapAll` except it only wraps "N" elements and then breaks and wraps the next "N" elements using a loop. Then set your wrappers class to `display: block;`.
如果你使用 jQuery，你可以创建一个简单的 `wrapN` 插件，它类似于 `wrapAll`，除了它只包装“N”个元素，然后使用循环中断和包装下一个“N”个元素。然后将您的包装类设置为 `display: block;`。
(function ($) {
$.fn.wrapN = function (wrapper, n, start) {
if (wrapper === undefined || n === undefined) return false;
if (start === undefined) start = 0;
for (var i = start; i < $(this).size(); i += n)
$(this).slice(i, i + n).wrapAll(wrapper);
return this;
};
}(jQuery));
$(document).ready(function () {
$("li").wrapN("<span class='break' />", 3);
});
Here is a JSFiddle of the finished product:
这是成品的 JSFiddle：
