我的第二個div，我把我的無序列表不顯示？

我想創建一個待辦事項列表應用程序，當我想到第二個div我想創建無序列表時，它不顯示，我似乎不知道它爲什麼不顯示。我試過擦除這個div並創建一個enw並寫一個簡單的hello消息，但甚至沒有顯示。我猜它與第一個div有關，因爲不允許它。我的第二個div，我把我的無序列表不顯示？

<!doctype html> 
<html> 
<head> 
     <title>To Do list</title> 

    <style type="text/css"> 

     #topBar-div{ 
      background-color: #F44336; 
      position:absolute; 
      top: 0px; 
      width:100%; 
      height: 150px; 

     } 

     body{ 
      margin: 0px; 
      padding: 0px; 
     } 

     h1{ 
      color:white; 
      margin-left: 300px; 
     } 

     #textInput{ 
      height: 30px; 
      margin-left: 100px; 
      width: 600px; 
      font-size: 20px; 
      color: #8E8E8E; 
     } 

     #addButton{ 
      height:37px; 
      position:relative; 
      top:-4px; 
      right: 5px; 
      width: 70px; 
      color: grey; 

     } 

     #secondBar-div{ 
      color: grey; 
      height: 350px; 
      width: 1000px; 
     } 


    </style> 

</head> 

<body> 
    <div id="topBar-div"> 

     <h1>My To Do List</h1> 

     <input type="text" value="Title..." id="textInput"> 

     <button id="addButton">Add</button> 

    </div> 

    <div id="secondBar-div"> 

     <ul> 

      <li>Hit the gym</li> 
      <li>Pay bills</li> 
      <li>Meet George</li> 
      <li>Buy eggs</li> 
      <li>Study</li> 
      <li>Cook Dinner</li> 

     </ul> 


    </div> 


    <script type="text/javascript"> 


    </script> 

</body> 
</html>

來源

2017-04-10 Richard Jimenez

取出第一個div'的位置是：絕對的;'？或者放置第二個？ –

注意當你使用'position：absolute;'它將div從「flow」中取出，因此默認情況下第二個div位於左上角，因爲流中沒有任何東西在它的「前面」。它就在那裏，就在另一個後面，放在同一個地方。所以你必須把第二個移到第一個之下，因爲第一個「塊」沒有被考慮在內。 –

您正在使用在第一個div（頂欄-DIV），這樣你的第二個div的風格絕對位置（secondBar-DIV）向上移動，實際上是第一個div後面。

嘗試添加這＃secondBar-DIV

margin-top: 150px;

來源

2017-04-10 18:49:40 alfredo

我的第二個div，我把我的無序列表不顯示？

回答

相關問題