如何在列表菜单中将列表项浮动到左侧？

Question

以下是css可点击下拉菜单。在这里，我想将列表元素浮动到左侧，而不是整个下拉菜单，只是单击下拉列表中的列表项。

.onclick-menu {
  float:right;
    position: relative;
    display: inline-block;
}
.onclick-menu-content {
  margin:0;
  padding:0;
  list-style:none;
   position: absolute;
    z-index: 1;
    background-color: #f9f9f9;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}
.onclick-menu:focus {
    pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.onclick-menu-content {
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}

<div tabindex="0" class="onclick-menu">dropdown
    <ul class="onclick-menu-content">
        <li>down1</li>
        <li>This one is just a long</li>
        <li>down3</li>
    </ul>
</div>

Answer 1

添加一些CSS以清除默认列表样式：

.onclick-menu-content {
  ...
  margin:0;
  padding:0;
  list-style:none;
}

fiddle sample

要使所有内容与页面右侧对齐，请添加额外的

right:0;

到CSS。请检查此second fiddle

Answer 2

.onclick-menu-content li{display:inline-block; float:left;}