Centralizing a list with floats

Asked

Viewed 13 times

-1

When I think I’m getting position I can think of these banana peels. I want to center that list .example in relation to your father .quadro. The list is a ul with float:left.

Why can’t I center this list .example in relation to your father .quadro applying margin properties? Apparently I can’t clean floats using clearfix in the list itself, so create div .test and applied the technique. What I am doing wrong?

Here is the HTML

<body>
    <div class="quadro">
        <div class="test">
            <ul class="example">
                <li>Primeiro</li>
                <li>Segundo</li>
                <li>Terceiro</li>
                <li>Quarto</li>
            </ul>
        </div>
   </div>
</body>

And here is Css

    margin: 60px auto;
    width: 800px;
    height: 300px;
    background: #FFBE4A;
    border-radius: 15px;
    box-shadow: 2px 2px 2px grey;
    box-sizing: border-box;
    overflow: hidden;
}

.test:before,
.test:after {
  content: "";
  display: table;
}

.test:after {
  clear: both;
}

.test{
  clear: both;
  *zoom: 1;
}

.test{
    margin: 0 auto;
}

.example li{
    list-style: none;
    float: left;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 6%, rgba(0,212,255,1) 100%);
    padding: 12px 20px; 
    border: 1px solid black;
    color: #fff;
}


.example li:first-child {
  border-radius: 4px 0 0 4px;
}

.example li:last-child {
  border-radius: 0 4px 4px 0;
}

.example li:hover{
    background: purple;
}
css3

1 answer

0

You can put a position: Absolute in the class . exemple and modify its position through the margin-left (always prefer margin-left. The "rem" will change position according to the parent of the element. Absolute will make you position it by html body without affecting other elements. you can modify the value of the margin-left according to the location you want to put! inclusive can put negative values.

.example li{
    position: absolute;
    margin-left: -3rem;
    list-style: none;
    float: left;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 6%, rgba(0,212,255,1) 100%);
    padding: 12px 20px; 
    border: 1px solid black;
    color: #fff;
}

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.