How to align 7 elements on the same line?

Asked

Viewed 3,932 times

5

I’m developing this site in bootstrap http://raissafigueiredo.com.br/masterclinic/

However, downstairs in the specials section, I have 7 elements in the same line. I had to use a "technical gambiarra" to align them, because I did not find a specific class that composes the 7 in the same line. In the desktop version everything is fine, but in the mobile version the elements are aligned to the left and disorganized.

Follow my code below:

<div class="feature-box">
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="59" height="55" alt="" src="img/icon-botox.png">
            </em>
            <h4>Botox e DTM</h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="41" height="55" alt="" src="img/icon-clareamento.png">
            </em>
            <h4>Clareamento</h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-implantes.png">
            </em>
            <h4>
              Implantes
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-estetica.png">
            </em>
            <h4>
              Estética
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-odontologia.png">
            </em>
            <h4>
              Odontologia
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-canal.png">
            </em>
            <h4>
              Tratamento de Canal e Ronco
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="38" height="55" alt="" src="img/icon-proteses.png">
            </em>
            <h4>
              Próteses
            </h4>
          </div>
        </div>
      </div>

I edited the percentage so that the elements behave on the same line without breaking.

#home-especialiadade .col-sm-2 {
    width: 14.2%;
}
html css twitter-bootstrap

  • Marcelo, welcome to Sopt! Explain better, which elements you need to align? What have you tried? Edit the question and enter the code you already have, it will be easier for someone to help you.

  • Thanks Mauricio. I edited and put the codes.

  • Bootstrap has a grid system that can help you with that. http://getbootstrap.com/css/#grid

4 answers

5

There is a simple way to do this with the function calc of css.

.minhas-colunas{
    width: calc(100% / 7);
}

To ensure that padding do not interfere in the calculation, I usually use box-sizing:border-box, which will calculate the size of the element literally, including the size of the border and padding.

.minhas-colunas {
    width: calc(100%/7);
    padding:5px;
    box-sizing:border-box;/** o padding não vai atrapalhar **/
  }

And finally, use the famous float:left:

.minhas-colunas{  
  width: calc(100%/7);
  background-color: green;
  box-sizing:border-box;
  float:left;
  display:block;
  border:1px solid black;
}

.pai{
 width:500px;
 background:blue;
 padding:10px
}

.pai:after{
  clear:both;
  content: ' ';
  display:block;
}
<div class="pai">
    <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
  <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
</div>

  • This function is the solution to my problems! Hahah, although (at least for me) is rarely seen around...

  • I slapped the answer

5


You can add the class col-xs-12, but it has to correct because its class #home-especialiadade .col-sm-2 this over her.

Adiona media query for your class #home-especialdiade .col-sm-2:

@media (min-width: 768px){
    #home-especialiadade .col-sm-2 {
        width: 14.2%;
    }
}

To solve your 7 column problem you can see this answer on ONLY ENGLISHMAN

  • Just so people understand: 100/7 = 14.285714285714286

1

Another method with no need to specify any width (except for mobile configuration if desired) would be to use ul li with display:table-cell.

ul {
    display:table;
    width:100%;
}
ul li {
    display:table-cell
}

Look at my example: http://jsfiddle.net/4r8mwLap/1/

Note: In the example the code is functional with the option of Responsive.

Edited

If you wish to continue using div instead of ul li, the process is the same, just use the same properties in divs, see the updated example: http://jsfiddle.net/4r8mwLap/2/

The bottom block is with div structure using the same properties as ul li.

1

Can use flexbox support:

section {
  display: flex;
  justify-content: space-between
}
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</section>

Browser other questions tagged html css twitter-bootstrap

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