CSS 浮动多个li的左右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15744466/
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
Floating multiple li's left and right
提问by SaurabhLP
I am trying to make a custom sidebar in wordpress, i have all the element and info in li's, what i am trying to do is try to shift the half of the total li's to left and half to the right...
我正在尝试在 wordpress 中制作一个自定义侧边栏，我拥有 li 中的所有元素和信息，我想要做的是尝试将总 li 的一半向左移动，另一半向右移动...
What i am using is float/clear left and right, that not seems to work as i wanted...
我正在使用的是左右浮动/清除，这似乎不像我想要的那样工作......
HTML Structure:-
HTML 结构：-
<ul>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
</ul>
The CSS:-
CSS：-
.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }
采纳答案by cimmanon
If you're willing to give up your list style disc (depending on the browser), you can do this easily without floats or modifying your markup.
如果您愿意放弃您的列表样式光盘（取决于浏览器），您可以轻松完成此操作而无需浮动或修改您的标记。
ul {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
回答by Axente Paul
Why don't you brake it down like this, depending on the case :)
你为什么不像这样刹车呢，视情况而定:)
<ul class="left">
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
<ul class="right">
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
.left{
float: left;
width: 50%; }
.right{
float: right;
width: 50%; }
or do it as @Xander says :)
或者像@Xander 说的那样做:)
回答by xandercoded
Shuffle you're HTML. when an element is cleared it does so against the previously floated element; in your case, it was the sixth element clearing the fifth:
洗牌你是 HTML。当一个元素被cleared 时，它会针对先前浮动的元素这样做；在您的情况下，这是清除第五个元素的第六个元素：
<ul>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
回答by Rui Nunes
Done it with simple markup and styles http://codepen.io/ruinunes/pen/bpgpZV
用简单的标记和样式完成它 http://codepen.io/ruinunes/pen/bpgpZV
HAML:
哈姆林：
%ul.chat
%li.stamp
Saturday
%span 20:32
%li.left Who is it?
%li.right It's Little Nero's, sir. I have your pizza.
%li.left Leave it on the doorstep and get the hell outta here
%li.stamp
Saturday
%span 20:33
%li.right Okay, but what about the money?
%li.left What money?
%li.right Well, you have to pay for your pizza, sir.
%li.left Is that a fact? How much do I owe you?
%li.left Keep the change, ya filthy animal!
%li.right Cheapskate.
SCSS
社会保障局
ul.chat {
font-family: sans-serif;
list-style:none;
margin: 0 auto;
padding: 0;
width: 50%;
li {
margin-bottom: 10px;
display: inline-block;
border-radius: 8px;
padding: 10px;
&.left {
background: #e3e3e3;
float:left;
margin-right: 50%;
width:50%;
border-top-left-radius: 0;
}
&.right {
background: #6CCE66;
color: #fff;
float: right;
width: 50%;
border-top-right-radius: 0;
}
&.stamp {
color: #666;
font-size: 80%;
text-align: center;
width: 100%;
span {
color: #999;
}
}
}
}
