largeur: 100% enfant plus grand que le parent

Je sais qu'il ya beaucoup de discussions comme celui-ci, mais je n'arrive pas à résoudre ce problème width:100%. J'ai cette description glissante sur un menu et c'est plus grand que le bouton. J'ai essayé d'ajouter box-sizing: border-box; mais cela n'a pas fonctionné. Je ne sais pas quel est le problème. Probablement a faire avec les marges, padding, et deux différents codes CSS pour #mainicons et #mainicons i?largeur: 100% enfant plus grand que le parent

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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

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

Merci pour l'aide! :)

Source

2017-05-25 Maëlle Jumel

Retirez le margin-top: 20px; dans #mainicons>a et #mainicons i

comme ceci: http://output.jsbin.com/romotisalo/3

Source

2017-05-25 15:28:21 Leo

Est-ce que vous voulez? retirer marge supérieure de #mainicons i

Aussi, j'ai enlevé le haut: 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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

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

Source

2017-05-25 15:30:08

peut-être que vous voulez quelque chose comme ça

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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

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

Source

2017-05-25 15:32:05 Rahul

Merci beaucoup! Pouvez-vous me dire pourquoi la marge supérieure a déclenché cette question pls? :) –

largeur: 100% enfant plus grand que le parent

Répondre

Questions connexes