Saya sedang mereka bentuk pengepala untuk projek kolej saya yang mana logonya harus berada di sudut kiri atas. Saya cuba menggunakan harta apungan dalam CSS tetapi tiada apa yang berlaku. Bagaimanakah cara saya mengalihkan logo saya ke penjuru kiri sebelah atas bar tajuk? Saya cuba banyak kali tetapi kod itu tidak dilaksanakan.
@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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Hanya letakkan tag
.logo元素和panda di dalam div. Ia akan disusun secara automatik.Anda juga terlupa untuk menutup teg
adi sekeliling butang.Jangan gunakan terapung atau kedudukan mutlak dalam reka letak melainkan anda tahu apa yang anda lakukan...
@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;*/ }Milik anda
header具有padding: 30px 10%，这意味着header的左右两侧会有10%的填充，然后在.logo中，您将起始位置设置为距离左侧20px.Salah satu cara untuk "membetulkan" adalah dengan
left: calc(-10% + 20px);来使.logo的leftberada dalam kedudukan negatif.@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; }