Un morceau de CSS à modifier...

towix147 Messages postés 3 Statut Membre -  
Jithel Messages postés 1049 Statut Membre -
Bonjour,
Je cherche à créer un site et je rencontre quelques petites difficultés:
J'aimerais implémenter des témoignages sur ma page d’accueil, ce qui est déjà fait mais je galère un peu pour la mise en forme et n'ayant jamais toucher au code auparavant, je suis débutant tout cela me parait fastidieux.
Donc voilà ma page avec les témoignages:


Les témoignages sont mis par blocs et collés à gauche et j'aimerais qu'ils soient à la suite en ligne horizontalement comme ça:


Et je vous fournis le code CSS associé:
@import url([https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%29%3B]
@import url([https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);]
figure.snip1390 {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  font-size: 16px;
  background-color: #2C3447;
  padding: 30px;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1390 *,
figure.snip1390 *:before,
figure.snip1390 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1390 figcaption {
  width: 100%;
}
figure.snip1390 h2,
figure.snip1390 h4,
figure.snip1390 blockquote {
  margin: 0;
}
figure.snip1390 h2,
figure.snip1390 h4 {
  font-weight: 300;
}
figure.snip1390 h2 {
  color: #ffffff;
}
figure.snip1390 h4 {
  color: #a6a6a6;
}
figure.snip1390 blockquote {
  font-size: 1em;
  padding: 45px 20px 40px 50px;
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: inset -1.4px -1.4px 2px rgba(0, 0, 0, 0.3);
  text-align: left;
  position: relative;
}
figure.snip1390 blockquote:before {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 70px;
  opacity: 0.25;
  font-style: normal;
  top: 0px;
  left: 20px;
}
figure.snip1390 .profile {
  width: 100px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
  border: solid 5px #A6A57A;
}


Merci pour les réponses, vous pouvez aller sur le site exoshopp.com également.

1 réponse

Jithel Messages postés 1049 Statut Membre 171
 
Il faut appliquer sur le parent la propriété

float: left;


Source :
https://stackoverflow.com/questions/19039403/horizontal-alignment-of-list-items
0