Question

我想制作一些名单，如：

li    li    li 
li    li    li
            li

ul {
  display: inline-block;
}

我使用了这个标记，但结果是：

            li 
li    li    li
li    li    li

所以，我试过用这个：

ul {
  display: inline-block;
  vertical-align: top;
}

但我收到了：

li
li

li
li

li
li
li

我该怎样做才能收到想要的结果？

Answer 1

检查一下：

.list{
width:300px; //or any desired size
padding:0;
display:flex;
flex-flow:row wrap;
justify-content: flex-end;
list-style:none;
}
.list li{
  width:33%;
}

<ul class="list">
<li>li</li><li>li</li><li>li</li>
<li>li</li><li>li</li><li>li</li>
<li>li</li>
</ul>

我使用了一个简单的flexbox。关键是justify-content: flex-end;，它与<li>末尾的最后<ul>对齐。我认为这是最干净，最聪明，最灵活的解决方案之一，没有添加无意识的<ul>，也没有太多令人困惑的CSS。

Answer 2

使用此fiddle

ul {
  display: inline-block;
  list-style:none;
  vertical-align:top;
}

Answer 3

您只需将ul设置为inline-block即可：

ul {
  display: inline-block;
  vertical-align: top;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>y</li>
  <li>t</li>
  <li>r</li>
</ul>

如果没有关于标记的更多信息，很难再给你任何建议。

Answer 4

请尝试使用以下代码。包裹＆＃39; ul＆＃39;在一个＆＃39; div里面并用flex显示它。这是链接https://jsfiddle.net/gkkLwmLk/

<style>
div {
    display: flex;
}
ul {
    display: inline-block;
}
</style>
<body>
<div>
    <ul>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</div>
</body>

Answer 5

只需将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" /> <ul class="your-class vertical dropdown menu" data-dropdown-menu="iet608-dropdown-menu" style="max-width: 250px;" role="menubar" data-is-click="false"> <li role="menuitem" class="is-dropdown-submenu-parent opens-right" aria-haspopup="true" aria-label="Item 2" data-is-click="false"> <a href="#Item-2">Item 2</a> <ul class="vertical menu nested submenu is-dropdown-submenu first-sub" data-submenu="" role="menu" style=""> <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#Item-2A">Item 2A</a></li> <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#Item-2B">Item 2B</a></li> </ul> </li> <li role="menuitem"><a href="#Item-3">Item 3</a></li> <li role="menuitem"><a href="#Item-4">Item 4</a></li> </ul>元素浮动到左侧。

ul

ul {
  float: left;
}

Answer 6

它在工作。

＆＃13;

ul {
  display: inline-block;
  vertical-align: top;
}

ul li {
  color: blue;
  font-weight: bold;
  font-family: sans-serif;
}

＆＃13;

<ul class="ul1">
  <li>li</li>
  <li>li</li>
</ul>
<ul class="ul2">
  <li>li</li>
  <li>li</li>
</ul>
<ul class="ul3">
  <li>li</li>
  <li>li</li>
  <li>li</li>
</ul>

＆＃13;

几个ul内联块

6 个答案: