Display inline does not work

Question

Display inline does not work

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (1 votes)

2

I would like to leave my section equal to this page here note that right below the% with% to 3 circular objects with title and text and when you resize the screen one goes below the other I am wanting to do something like this, instead of using images I use header that is easier but I can not leave the correct text the same as the image and the redimensioning effect is half bugged

#sessao-1 {
  text-align: center;
  color: #000;
  font-family: Gabriola;
  margin-top: 750px;
}
#sessao-1 h1 {
  font-size: 3em;
}
#sessao-1 #texto-sessao {
  width: 550px;
  max-width: 85%;
  margin: -30px auto;
  font-size: 1.1em;
}
.info {
  margin: 70px auto;
  text-align: center;
}
.info p {
  width: 350px;
  max-width: 85%;
  margin: -20px auto;
  text-align: center;
  font-size: 1.1em;
}
.info li {
  display: inline-block;
}
.info li i {
  color: #222;
  margin: 30px;
  font-size: 2em;
  width: 5px;
  text-align: center;
  border: 2px solid #222;
  border-radius: 50%;
}

<section id="sessao-1">
  <h1>Porque nos escolher</h1>
  <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <ul class="info">
    <li>
      <a href="#">
        <i class="fa fa-code"></i>
        <br/>Codigo Semantico</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-heart"></i><br/>Layout responsivo</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-plus"></i>Otima qualidade</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
  </ul>
</section>

Here on my screen it gets bad follow the screenshot:

What am I doing wrong?

Note: In the mozila for example one stays on top of the other do not understand why

html css

asked by anonymous 26.06.2015 / 21:36

3 answers

3

The example site you mentioned uses foundation.css . I was missing linking to CSS. See:

    #sessao-1 {
      text-align: center;
      color: #000;
      font-family: Gabriola;
      margin-top: 750px;
    }
    #sessao-1 h1 {
      font-size: 3em;
    }
    #sessao-1 #texto-sessao {
      width: 550px;
      max-width: 85%;
      margin: -30px auto;
      font-size: 1.1em;
    }
    .info {
      margin: 70px auto;
      text-align: center;
    }
    .info p {
      width: 350px;
      max-width: 85%;
      margin: -20px auto;
      text-align: center;
      font-size: 1.1em;
    }
    .info li {
      display: inline-block;
    }
    .info li i {
      color: #222;
      margin: 30px;
      font-size: 2em;
      width: 5px;
      text-align: center;
      border: 2px solid #222;
      border-radius: 50%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://www.egrappler.com/responsive-app-landing-page/css/foundation.min.css" rel="stylesheet"/>
    <section id="sessao-1">
      <h1>Porque nos escolher</h1>
      <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <ul class="info">
                <li>
                    <a href="#">
                        <i class="fa fa-code"></i>
                        <br/>Codigo Semantico</a> <br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-heart"></i>
                        <br/>Layout responsivo</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-plus"></i>
                        <br>Otima qualidade</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </li>
            </ul>
        </section>

26.06.2015 / 22:13

1

One thing is for sure, if you try to change the dimension characteristics of an inline component, it will not. In your case, the font-awesome tag is inline. If you put display: inline-block, the background will be round ... Notice that your circle occupies a space of one letter ...

30.06.2015 / 14:31

Fill Second Input automatically when filling the First Hide Div after x seconds after performing action

score 3 · Accepted Answer

This is because you must also use media queries in order to achieve the desired:

.info li {
    display: inline-block;
    width: 180px;
    vertical-align:top;
}
/* Isto aplica o CSS desejado para telas com a resolução menor ou igual a - 600px */
@media only screen and (max-width: 600px) {
    .info li {
        width: 100%;
        margin:10px 0;
    }
}

Here's a Online Sample in JsFiddle. Drag the results window to see the media queries in action. I have also changed and arranged some other parameters in HTML and CSS.