List with inline display does not work correctly

Question

List with inline display does not work correctly

Navigation

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

1

I need to align in 3 columns my image and texts help me please follow my code they are in a list

ul li {
  list-style-type: none;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info {
  text-align: center;
}
.info li {
  display: inline;
}
.info li img {}

<section class="corpo-1">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <!-- <img src="images/logo-transp.png" /> -->
  <ul class="info">
    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>
</section>

They have to look like this:

Hereistheimageofmybuttonasitwasinthebrowsersaftertheissues:

inGooglechrome:

No mozila:

inSafari:

and in Opera:

Followthebuttoncode:

<pclass="text-center">    
      <a href="#">
         <button id="btn-info">leia mais ...</button>
     </a>
 </p>

#btn-info{
    border:3px solid #000;
    border-radius: 5px;
    width: 220px;
    height: 50px;
    text-align: center;
    font-family: Gabriola;
    font-size: 1.5em;
    color: #000;
    background: transparent;
    cursor: pointer;
    margin-top: 5%;
    clear: both;

}

#btn-info:hover{
    background: #000;
    color: #fff;
}

html5 css3

asked by anonymous 20.05.2015 / 22:01

3 answers

1

To stay side by side you can define:

ul li {
  list-style-type:none;
  float:left;
}

It would still not have a result as you wish, since it would not be centralized, but then you just need to set a width for your ul and center it:

ul { 
  width:72%;
  margin:auto;
}

It may not be the "best practice", but it works! : D

20.05.2015 / 22:31

0

ul{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }
ul li {
  list-style-type: none;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info {
  text-align: center;
}
.info li {
  display: inline;
}
.info li img {}

<section class="corpo-1">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <!-- <img src="images/logo-transp.png" /> -->
  <ul class="info">
    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>
</section>

31.03.2016 / 13:51

use COUNT and insert DIV of X in X quantity Bootstrap list panel problem

score 1 · Accepted Answer

1

Try this:

.info li {
  float: left;
  width: 33%;
}

Example tested on all browsers

20.05.2015 / 22:33