Question

我有一个无序列表

<ul id="smart-menu">
    <li class="left">item 1</li>
    <li class="left">item 2</li>
    <li class="left">item 3</li>
    <li class="right">item 4</li>
    <li class="right">item 5</li>
</ul>

我希望项目水平显示。左侧网站上的左侧课程和右侧网站上的其他课程。

我想使用smartmenus，因此我需要一个无序列表。

以下是plunkr：http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview

Answer 1

根据我对你帖子的理解，这是你想要的结果

.left{float:left}
.right{float:right}
ul{list-style:none}

<ul id="smart-menu">
    <li class="left">item 1</li>
    <li class="left">item 2</li>
    <li class="left">item 3</li>
    <li class="right">item 4</li>
    <li class="right">item 5</li>
</ul>

Answer 2

如果你有一个＆＃34;填充物，你可以使用flex-box。左右之间的元素。

＆＃13;

ul {
  display: flex;
  list-style: none;
}
.filler {
  flex: 1 0 auto;
}

＆＃13;

<ul id="smart-menu">
  <li class="left">item 1</li>
  <li class="left">item 2</li>
  <li class="left">item 3</li>
  <li class="filler"></li>
  <li class="right">item 4</li>
  <li class="right">item 5</li>
</ul>

＆＃13;

查看此笔：http://codepen.io/anon/pen/pJpBjq

这是一个guide to flex-box

在相同的UL中左右浮动

2 个答案: