我無法使用浮動+ H3太寬

Question

Link to site

/*Align width 1170px*/ 
.align-1170{ 
    height: 100%; 
    width: 1170px; 
    margin: 0 auto; 
} 

/*Align vertically*/ 
.align-vertically{ 
    height: 100%; 
    display: table; 
} 



/*Header*/ 

header{ 
    height: 60px; 
    width: 100%; 
    background-color: #1ccb56; 

} 

.logo{ 
    display: table-cell; 
    vertical-align: middle; 
} 

.author{ 
    float: right; 
    display: table-cell; 
    vertical-align: middle; 
} 

1. 爲什麼我不能使用float：權利;移動「作者：projekcior.com」到右側 （垂直對齊）？
2. 爲什麼我的h3標籤太寬？ （650px）

謝謝！

Answer 1

是的元素浮動是自動

display: block;

使用

h3 { display:inline-block; } 

來管理您的H3的寬度。

Answer 2

讓我一步一步回答你的問題。

爲什麼我不能使用float：right;將「Author：projekcior.com」移動到右側（垂直對齊）？

也許是因爲，您沒有設置邊距。它實際上是在網頁的右側。我只是試圖使用保證金。

p.white { 
    margin: 20px; 
} 

使用它，它從頂部角落下來。

爲什麼我的h3標籤太寬了？ （650px）

因爲您沒有設置任何width: value元素，所以瀏覽器會自動設置寬度。我使用寬度屬性來最小化大小。

h3 { 
    width: 200px; 
} 

這是您的頁面的截圖。

Answer 3

嘿小紋我想你沒有寫正確的CSS的網頁，所以我想糾正你的頁面中看到下面CSS提到： -

CSS

.align-vertically { 
    border: 1px solid; 
} 
.align-1170 { 
    height: 100%; 
    margin: 0 auto; 
    width: 1170px; 
} 
.logo { 
    float: left; 
} 
h3 { 
    border: 1px solid; 
    display: inline-block; 
    font-family: 'Lato',sans-serif; 
    font-size: 1.5em; 
} 
.author { 
    float: right; 
} 

看到CSS，並嘗試瞭解你犯了錯誤，其實你的父div沒有浮動，這就是爲什麼你的孩子div不能控制....

應用此CSS我通過這個猜你會實現你想要的結果...