How to align DIVs horizontally without breaking lines?

Question

How to align DIVs horizontally without breaking lines?

Navigation

#1 by (1 votes)

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;

}

See my DIV's:

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

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

I need them all to stay on a single horizontal line and resize to the width of the browser.

css

asked by anonymous 07.08.2018 / 05:37

1 answer

Load table via AJAX Help with Json to get API value

score 1 · Accepted Answer

Use flex box , but see the compatibility of browsers for their purpose. Some premodern versions of browsers do not support such as IE 9 down (see Can I Use ).

Add display: flex; to parent div :

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>