3 votes

Maëlle Jumel avatar

width : 100% l'enfant est plus grand que le parent

Demandé el 25 de Mai, 2017
Quand la question a-t-elle été
513 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je sais qu'il y a beaucoup de fils comme celui-ci, mais je n'arrive pas à résoudre ce problème. width:100% question. J'ai une description coulissante dans un menu et elle est plus grande que le bouton. J'ai essayé d'ajouter box-sizing: border-box; mais ça n'a pas marché. Je ne sais pas quel est le problème. Cela a probablement à voir avec les marges, le padding et deux codes css différents pour les éléments suivants #mainicons et #mainicons i ?

Mon code :

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 250px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

<link href="stackoverflow.com//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="stackoverflow.com/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="stackoverflow.com/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="stackoverflow.com/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="stackoverflow.com/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>

Merci pour votre aide ! :)

Demandé el 25 de Mai, 2017 par Maëlle Jumel

Réponses

Trop de publicités?

1voto

Leo avatar
Leo Points 30

Retirer le margin-top: 20px; sur #mainicons>a et #mainicons i

comme ça : http://output.jsbin.com/romotisalo/3

Répondu el 25 de Mai, 2017 par Leo (30 Points )

1voto

Daniel H avatar
Daniel H Points 8522

Est-ce que c'est ce que vous voulez ? supprimer la marge supérieure de #mainicons i

De plus, j'ai enlevé le top : 250px, juste pour montrer l'exemple ici.

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 0px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

<link href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="http://stackoverflow.com/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="http://stackoverflow.com/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="http://stackoverflow.com/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="http://stackoverflow.com/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>
Répondu el 25 de Mai, 2017 par Daniel H (8522 Points )

1voto

Rahul avatar
Rahul Points 3097

Peut-être que vous voulez quelque chose comme ceci

supprimer

margin-top: 20px de #mainicons i

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 250px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  /*margin-top: 20px;*/
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

<link href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="http://stackoverflow.com/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="http://stackoverflow.com/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="http://stackoverflow.com/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="http://stackoverflow.com/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>
Répondu el 25 de Mai, 2017 par Rahul (3097 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X