如何在彼此之下设置这些li元素？

Question

如何让test3站在test2下，test2站在test1下？我已经忙了几个小时试图弄清楚如何获得一个集中的响应式ul / li

JSFiddle

HTML

<div class="wrapper">
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
     <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>

CSS

.wrapper {
    text-align: center;
}
ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    *display: inline;
    list-style-type: none;
}
li {
    float: left;
    padding: 5px 5px;
    border: 1px solid black;
}

Answer 1

只需从float: left;移除li。

＆＃13;

＆＃13;

.wrapper {
  text-align: center;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  /* display: inline; */
  list-style-type: none;
}
li {
  padding: 5px 5px;
  border: 1px solid black;
}

＆＃13;

<div class="wrapper">
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
     <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

<强> JSFiddle

Answer 2

如果你需要float属性，那么将display属性从ul移到li并将clear属性添加到左边。

ul {

    margin: 0;
    padding: 0;
    *display: inline;
    list-style-type: none;
}
li {
  display: block;
   float: left;
   clear: left;
    padding: 5px 5px;
    border: 1px solid black;
}