我正在為我的大學專案設計一個標題，其中標誌應該位於左上角。我嘗試使用CSS中的浮動屬性，但沒有反應。如何將我的標誌移到標題列的左上角？我試了很多次，但程式碼沒有執行。
@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
只需將您的
.logo元素和p標籤放在一個div中。它會自動排序。您也忘記了在按鈕周圍關閉
a標籤。在佈局中不要使用浮動或絕對定位，除非您知道自己在做什麼...
@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;*/ }您的
header具有padding: 30px 10%，這意味著header的左右兩側會有10%的填充，然後在.logo中，您將起始位置設定為距離左側20px。一種「修復」它的方法是透過
left: calc(-10% 20px);來使.logo的left處於負位置。@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; }