12

我正在尝试在 wordpress 中制作一个自定义侧边栏，我在 li 中拥有所有元素和信息，我想做的是尝试将总 li 的一半向左移动，一半向右移动......

我正在使用的是左右浮动/清除，这似乎不像我想要的那样工作......

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>

CSS：-

.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }

jsFiddle

4

4 回答 4

11

如果您愿意放弃您的列表样式光盘（取决于浏览器），您可以轻松地做到这一点，而无需浮动或修改您的标记。

http://jsfiddle.net/Duejc/2/

ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
于 2013-04-01T14:17:42.127 回答
10

你为什么不像这样刹车呢，视情况而定:)

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

或者像@Xander 说的那样做:)

于 2013-04-01T13:37:29.107 回答
6

随机播放您的 HTML。当一个元素被clear编辑时，它会针对先前浮动的元素这样做；在您的情况下，这是清除第五个元素的第六个元素：

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

jsFiddle

于 2013-04-01T13:35:16.553 回答
2

用简单的标记和样式完成它 http://codepen.io/ruinunes/pen/bpgpZV

哈姆勒：

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

}
于 2016-03-16T21:49:06.327 回答