CODEWITHSUNDEEP
htmlcss
user6390155
user6390155

Reputation:

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

Upvotes: 1

Views: 922

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

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

Upvotes: 2

Anirudh Mangalvedhekar
Anirudh Mangalvedhekar

Reputation: 337

If you need the float property then move display property from ul to li and add clear property to left.

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

Upvotes: 0

Related Questions