How to align DIV s horizontally without them breaking line?

Asked

Viewed 19 times

1

I have the following CSS:

div.config-pai{
    width: 100%;
}
div.config-pai div{
    position: relative;
    float: left;
    width: 20%;
    background-color:#666;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:20px;
    font-weight:normal;
    text-align: center;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;

}

Look at my Divs:

<div class="config-pai">
        <div>Adicionar</div>
        <div>Adicionar</div>    
        <div>Adicionar</div>    
        <div>Adicionar</div>    
        <div>Adicionar</div>
</div>

The internal Ivds are horizontal, but the last one goes to the bottom line because I’m using margin, how to solve this?

I need them all to be in a single horizontal line and resize according to the width of the browser.

css

1 answer

1


Use the flex box, but see browser compatibility for your purpose. Some pre-modern versions of browsers do not support, such as IE 9 down (see Can I Use).

Add display: flex; in div pai:

div.config-pai{
    width: 100%;
    display: flex;
}
div.config-pai div{
    position: relative;
    float: left;
    width: 20%;
    background-color:#666;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:20px;
    font-weight:normal;
    text-align: center;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;

}
<div class="config-pai">
   <div>Adicionar</div>
   <div>Adicionar</div>    
   <div>Adicionar</div>    
   <div>Adicionar</div>    
   <div>Adicionar</div>
</div>

Browser other questions tagged css

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