1. 首頁
  2. 問答
  3. CSS不識別div標籤中的標識符（ID）。

CSS不識別div標籤中的標識符（ID）。

2017-03-02 129 views
0

我知道類似的問題已經被問到，但我找不到他們之間的問題的答案。 我試圖移動主要從左起源250像素開始，但是當我創建一個包裝，並試圖風格它沒有做任何事情。CSS不識別div標籤中的標識符（ID）。

/* site.css */ 
 

 
body{ 
 
    font-family:sans-serif; 
 
    font-size: 14px; 
 
    margin:0; 
 
} 
 
label{ 
 
    font-weight:bold; 
 
    display:block; 
 
} 
 
input[type=text], input[type=password], textarea{ 
 
    width:150px; 
 
} 
 

 
#main{ 
 
    background-color: #eee; 
 
    padding:4px; 
 
    margin:0; 
 
} 
 
#footer{ 
 
    background-color:#222; 
 
    color:#eee; 
 
    padding:8px 4px; 
 
    position:fixed; 
 
    width:100%; 
 
    bottom:0; 
 
} 
 
.Headshot{ 
 
    max-width: 50px; 
 
    border: 1px solid #222; 
 
    padding: 3px; 
 
    
 
} 
 

 
.menu{ 
 
    font-size:11px; 
 
} 
 

 
.menu li{ 
 
    list-style-type: none; 
 
} 
 

 
.menu li.active { 
 
    font-weight:bold; 
 
} 
 
#sidebar { 
 
    background:#2a2c36; 
 
    color:#eee; 
 
    position:fixed; 
 
    height:100%; 
 
    width:250px; 
 
    overflow:hidden; 
 
    left:0; 
 
    margin:0; 
 
} 
 

 
#wrapper{ 
 
    left:0 0 0 250px; 
 
} 
 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>The World</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="css/site.css" /> 
 

 
</head> 
 
<body> 
 
    <div id="sidebar"> 
 
     <img src="img/user1.jpg" alt="Headshot" class="Headshot"/> 
 
     <span>Sam Hastings </span> 
 
     <ul class="menu"> 
 
      <li class="active"><a href="#" >Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
     <div id="main"> 
 
      <h3>The World</h3> 
 
      <p>Ofineo website</p> 
 
      <form> 
 
       <div> 
 
        <label>Date</label> 
 
        <input /> 
 
       </div> 
 
       <div> 
 
        <label>Location</label> 
 
        <input /> 
 
       </div> 
 
       <div> <input type="submit" value="add" /></div> 
 
      </form> 
 
     </div> 
 
     <div id="footer"> 
 
      &copy; 2015 the world Ltd. 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-03-02 J.melendez

+1

使用'餘量-left'代替'left' – Toxide82

+1

'left'只接受1個參數。 – ne1410s

+1

您也沒有在該div上使用任何'位置：' – Toxide82

回答

0

的CSS propiety 左必須position:relative聲明（或絕對的，固定的）。
然後設置1個屬性。 left:250px，不left: 0 0 0 250px

#wrapper{ 
    left:250px; 
    position:relative; 
}

來源

2017-03-02 12:20:18 Roy

+0

或者，用'margin'代替'left'可能會起作用。 – domsson

0

如果你不想使用的位置，然後使用margin。

更換

#wrapper{ 
    left:0 0 0 250px; 
}

隨着

#wrapper{ 
    margin:0 0 0 250px; 
}

下面是代碼

/* site.css */ 
 

 
body { 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    margin: 0; 
 
} 
 

 
label { 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
input[type=text], 
 
input[type=password], 
 
textarea { 
 
    width: 150px; 
 
} 
 

 
#main { 
 
    background-color: #eee; 
 
    padding: 4px; 
 
    margin: 0; 
 
} 
 

 
#footer { 
 
    background-color: #222; 
 
    color: #eee; 
 
    padding: 8px 4px; 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
} 
 

 
.Headshot { 
 
    max-width: 50px; 
 
    border: 1px solid #222; 
 
    padding: 3px; 
 
} 
 

 
.menu { 
 
    font-size: 11px; 
 
} 
 

 
.menu li { 
 
    list-style-type: none; 
 
} 
 

 
.menu li.active { 
 
    font-weight: bold; 
 
} 
 

 
#sidebar { 
 
    background: #2a2c36; 
 
    color: #eee; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    left: 0; 
 
    margin: 0; 
 
} 
 

 
#wrapper { 
 
    margin: 0 0 0 250px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>The World</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="css/site.css" /> 
 

 
</head> 
 

 
<body> 
 
    <div id="sidebar"> 
 
    <img src="img/user1.jpg" alt="Headshot" class="Headshot" /> 
 
    <span>Sam Hastings </span> 
 
    <ul class="menu"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div id="main"> 
 
     <h3>The World</h3> 
 
     <p>Ofineo website</p> 
 
     <form> 
 
     <div> 
 
      <label>Date</label> 
 
      <input /> 
 
     </div> 
 
     <div> 
 
      <label>Location</label> 
 
      <input /> 
 
     </div> 
 
     <div> <input type="submit" value="add" /></div> 
 
     </form> 
 
    </div> 
 
    <div id="footer"> 
 
     &copy; 2015 the world Ltd. 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-03-02 12:23:19

0

添加margin-left到#main，因爲這是你說你想要的。

/* site.css */ 
 

 
body{ 
 
    font-family:sans-serif; 
 
    font-size: 14px; 
 
    margin:0; 
 
} 
 
label{ 
 
    font-weight:bold; 
 
    display:block; 
 
} 
 
input[type=text], input[type=password], textarea{ 
 
    width:150px; 
 
} 
 

 
#main{ 
 
    background-color: #eee; 
 
    padding:4px; 
 
    margin-left:250px; 
 
} 
 
#footer{ 
 
    background-color:#222; 
 
    color:#eee; 
 
    padding:8px 4px; 
 
    position:fixed; 
 
    width:100%; 
 
    bottom:0; 
 
} 
 
.Headshot{ 
 
    max-width: 50px; 
 
    border: 1px solid #222; 
 
    padding: 3px; 
 
    
 
} 
 

 
.menu{ 
 
    font-size:11px; 
 
} 
 

 
.menu li{ 
 
    list-style-type: none; 
 
} 
 

 
.menu li.active { 
 
    font-weight:bold; 
 
} 
 
#sidebar { 
 
    background:#2a2c36; 
 
    color:#eee; 
 
    position:fixed; 
 
    height:100%; 
 
    width:250px; 
 
    overflow:hidden; 
 
    left:0; 
 
    margin:0; 
 
} 
 

 
#wrapper{ 
 
    left:0 0 0 250px; 
 
} 
 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>The World</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="css/site.css" /> 
 

 
</head> 
 
<body> 
 
    <div id="sidebar"> 
 
     <img src="img/user1.jpg" alt="Headshot" class="Headshot"/> 
 
     <span>Sam Hastings </span> 
 
     <ul class="menu"> 
 
      <li class="active"><a href="#" >Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
     <div id="main"> 
 
      <h3>The World</h3> 
 
      <p>Ofineo website</p> 
 
      <form> 
 
       <div> 
 
        <label>Date</label> 
 
        <input /> 
 
       </div> 
 
       <div> 
 
        <label>Location</label> 
 
        <input /> 
 
       </div> 
 
       <div> <input type="submit" value="add" /></div> 
 
      </form> 
 
     </div> 
 
     <div id="footer"> 
 
      &copy; 2015 the world Ltd. 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-03-02 12:24:16

相關問題

 相關問題