不能在div上設置寬度和高度

我在做一個項目，我們正在學習如何設計谷歌主頁。我的代碼在這裏：http://jsfiddle.net/HgpQW/。我意識到我的工作遠未完成，但我希望有人能夠幫助我做一件事：爲什麼我不能展開「登錄」元素？我試圖在CSS中設置寬度和高度，但它沒有效果。不能在div上設置寬度和高度

<header> 
    <ul id="headerlist"> 
    <li>+You</li> 
    <li>Gmail</li> 
    <li id="grid"> 
    <li id="sign_in"> 
     <div id="sign_in"> 
     <span>SIGN IN</span> 
     </div> 
    </li> 
    </ul> 
</header>

body { 
    font-family:sans-serif; 
    font-size: 12px; 
    letter-spacing: .5px; 
} 

header { 
    position: absolute; 
    right: 0; 
    top: 0; 
    margin-top: 11px; 
} 

ul { 
    list-style-type: none; 
} 

li, li div { 
    display:inline 
} 

#headerlist li { 
    padding-right: 6px; 
} 

#sign_in { 
    display:block; 
    background-color: #DA4531; 
    color: white; 
    height: 35px; 
    width: 80px; 
}

編輯：該解決方案是在#sign_in李

來源

2013-10-08 macsplean

你鏈接到一個空白的jsfiddle，你能修復鏈接嗎？ – Joseph

小提琴固定... – macsplean

您不能鏈接到StackOverflow中的jsfiddle，而無需在此處添加代碼塊。這就是爲什麼小提琴空白。我從jsfiddle頁面粘貼了你的CSS。 – egrunin

<div>元素通常有顯示：塊;但是你必須以某種方式將其更改爲display:inline;

如果你自己沒有這樣做，它可能是你使用過的樣板CSS造成的。

爲了能夠調整寬度，改變顯示爲：

display:block;

或這也將工作，並且如果先前發現需要去除的缺省塊顯示器可以是優選的：

display:inline-block;

另一種可能性可能是您的div包含在另一個div中，並且父母div overflow設置爲hidden。

來源

2013-10-08 03:07:52

inline-block的沒有鏈接到一個特定的小提琴，很難具體回答你的問題。剛剛從你的描述，我猜它可能需要這個CSS：

display: block;

來源

2013-10-08 03:01:59

謝謝。這確實允許我設置高度和寬度。但是，正如我擔心的那樣，導致我的列表元素（其中「SIGN IN」元素爲一）不再出現在同一行上 – macsplean

使用內嵌塊 –

不能在div上設置寬度和高度

回答

相關問題