Giovanni Dogger Giovanni Dogger - 4 months ago 10
HTML Question

How do I set these li elements under eachother?

How do I get test3 to stand under test2, and test2 to stand under test1? I've been busy for hours trying to figure out how to get a centered responsive 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

Just remove your float: left; from the li.

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

JSFiddle