定位CSS錯誤

Question

這是我正在使用Django開發的網頁的CSS代碼。 我當前遇到的問題是，inputlabel和輸入區域內的寬度，左和左空白不影響位置。 inputlabel和輸入區域一樣適合其中的內容。

無論我更改的值如何，兩者似乎都沒有改變。

但是，＃id_description可以正常工作。

我是CSS的新手，不確定100％我缺少的是什么。

container {
    position: relative;
}    
inputlabel { 
    width: 200px; 
    position: absolute; 
    left: 1000px;  
}
inputarea {
    margin-left: 200px;
}

#id_description { 
    resize: none; 
    width: 500px; 

} 
body { 

}

Answer 1

你想念'。' 和'＃'

如果container是一個class ，那么您需要使用.container

如果container是一個id ，那么您需要使用#container

同樣適用於所有。

Answer 2

要為類定義CSS，請使用.container{} .inputlabel{}等。您缺少. 的

Answer 3

您應該使用下一個：

.container {
    position: relative;
}    
.inputlabel { 
    width: 200px; 
    position: absolute; 
    left: 1000px;  
}
.inputarea {
    margin-left: 200px;
}

HTML代碼將是這樣的：

<div class='container'>

要么

<input class='inputlabel' ...>

您也可以使用next：

#container {
    position: relative;
}    
#inputlabel { 
    width: 200px; 
    position: absolute; 
    left: 1000px;  
}
#inputarea {
    margin-left: 200px;
}

代碼如下：

<div id='container'>

要么

<input id='inputlabel' ...>

因此，在樣式名稱前使用#表示您應該通過id將這種樣式與標記鏈接。 . 符號意味着您必須通過class將此樣式與標記鏈接。

但是：CSS代碼中的body部分可能沒問題。 您可以使用body或input名稱，因此它將影響具有此類名稱的所有標簽。

有一篇文章，您可以閱讀有關id和class樣式之間的區別： 單擊我