爲什麼float右邊出現在float左邊？

我有一些導航鏈接，它們是圖像按鈕，我已經應用了float: left，並且我有一個登錄字段。我已經應用了float: right的登錄字段出現在導航欄下方。我如何使它們並排？爲什麼float右邊出現在float左邊？

body { 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    color: #FFFFFF; 
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; 
    background-color: #000000; 
} 

#wrapper { 
    margin: 0 auto; 
    width: 80%; 
} 

#top { 
    border: medium dashed #F40408; 
    text-align: left; 
    width: 1500px; 
} 

#navigation { 
    -webkit-box-shadow: 0 0 20px 3px #E006F5; 
    box-shadow: 00 0 20px 3px #E006F5; 
    width: 1080px; 
    height: 50px; 
} 

#navigation ul { 
    list-style-type: none; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom:0px; 
    margin-left: 0px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 

#navigation a { 
    float: left; 
} 

#login { 
    float: right; 
}

謝謝，邁克

來源

2015-10-19 Mike

很難想象了一下，因爲沒有提供HTML代碼，但我想嘗試添加position: absolute它和你的計劃，以使浮動左/右將工作正常。

來源

2015-10-19 01:57:05

沒有工作 – Mike

即使在導航頭部分中，您是否可以提供html結構？ –

簡單測試就像https://jsfiddle.net/d2qcqL7r/ ，你可以做其他的調整。 –

爲什麼float右邊出現在float左邊？

回答

相關問題