Je conçois un en-tête pour mon projet universitaire où le logo doit être dans le coin supérieur gauche. J'ai essayé d'utiliser la propriété float en CSS mais rien ne s'est passé. Comment déplacer mon logo dans le coin supérieur gauche de la barre de titre ? J'ai essayé plusieurs fois mais le code n'est pas exécuté.
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap') * { box-sizing: border-box; margin: 0; padding: 0; background-color: #F5F5F5; } li, a, button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; color: #000000; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%); height: 56px; } p { position: absolute; width: 584px; height: 67px; left: 232px; top: 25px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background: url(pharmapp.png); align-items: center; font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-size: 16px; line-height: 34px; color: #000000; } .logo { position: relative; float: left; margin-block-start: 10px; background: url(pharmapp.png); height: 122px; left: 20px; top: 0px; bottom: 40px; }
Medcines on your Doorstep
Contact
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mettez simplement votre balise
.logo元素和pdans un div. Il triera automatiquement.Vous avez également oublié de fermer la balise
aautour du bouton.N'utilisez pas de flotteurs ou de positionnement absolu dans les mises en page à moins que vous sachiez ce que vous faites...
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap') * { box-sizing: border-box; margin: 0; padding: 0; background-color: #F5F5F5; } li, a, button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; color: #000000; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%); height: 56px; } /* p { position: absolute; width: 584px; height: 67px; left: 232px; top: 25px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background: url(pharmapp.png); align-items: center; font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-size: 16px; line-height: 34px; color: #000000; } */ .logo { /* position: relative; float: left;*/ margin-block-start: 10px; background: url(pharmapp.png); height: 122px; /* left: 20px; top: 0px; bottom: 40px;*/ }Votre
header具有padding: 30px 10%，这意味着header的左右两侧会有10%的填充，然后在.logo中，您将起始位置设置为距离左侧20px.Une façon de "réparer" ce problème est de
left: calc(-10% + 20px);来使.logo的leftêtre dans une position négative.@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap') * { box-sizing: border-box; margin: 0; padding: 0; background-color: #F5F5F5; } li, a, button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; color: #000000; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%); height: 56px; } p { position: absolute; width: 584px; height: 67px; left: 232px; top: 25px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background: url(pharmapp.png); align-items: center; font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-size: 16px; line-height: 34px; color: #000000; } .logo { position: relative; float: left; margin-block-start: 10px; background: url(pharmapp.png); height: 122px; /*you can play with the numbers here*/ left: calc(-10% + 20px); top: 0px; bottom: 40px; }