如何製作標題標題棒？

Question

我無法弄清楚如何將這個標題標題放在頂部。我想要它填充頂部區域以及左邊&的權利。任何人都可以使用CSS超級技能嗎？

請注意，我仍想保留表值在中間，我想保持桌面填充。

#search input{ 
 
    width: 100%; 
 
} 
 

 
#activities { 
 
    top: 0; 
 
    float: right; 
 
    border: 0 none; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); 
 
    padding: 20px; 
 
    margin: 2%; 
 
    position: relative; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
}

<div id="activities"> 
 
        <h2 style="background:#0094ff;color:white;width: 100%;padding: 4px;position: relative;">Div Title</h2> 
 
        <form id="search"> 
 
         <input name="query" placeholder="Search..."> 
 
        </form> 
 
        <table> 
 
        <tbody> 
 
        <tr> 
 
         <td> 
 
          Fotboll 4v4 
 
         </td><td> 
 
          0.3 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Brännboll 
 
         </td><td> 
 
          1.2 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Badminton 2v2 
 
         </td><td> 
 
          1.5 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Gruppmöte 
 
         </td><td> 
 
          2.2 km 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </div>

或者演示在這裏：https://jsfiddle.net/a2uqh6eu/

Answer 1

你Div Title沒有考慮將其設置爲100％，爲什麼整個寬度的事件嗎？因爲你的容器中使用的填充，填充是你的內容邊界的空間，看看這個鏈接可以幫助：https://www.w3schools.com/css/css_boxmodel.asp

所以我刪除您padding: 20px從容器中，並且加入了類.content來包裝你的內容和添加填充物有：

.content { 
    padding: 0 20px 20px; 20px 
} 

現在爲您DIV所有權類margin-top: 0;會讓它留頂部和width: 100%;現在將共同努力，以容器的整個寬度。還使用text-align: center;來居中文本。

.div-title { 
    background: #0094ff; 
    color: white; 
    width: 100%; 
    position: relative; 
    text-align: center; 
    margin-top: 0; 
} 

#search input { 
 
    width: 100%; 
 
} 
 

 
#activities { 
 
    top: 0; 
 
    float: right; 
 
    border: 0 none; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); 
 
    position: relative; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
.div-title { 
 
    background: #0094ff; 
 
    color: white; 
 
    width: 100%; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-top: 0; 
 
} 
 

 
.content { 
 
    padding: 0 20px 20px; 20px 
 
}

<div id="activities"> 
 
    <h2 class="div-title">Div Title</h2> 
 
    <div class="content"> 
 
    <form id="search"> 
 
    <input name="query" placeholder="Search..."> 
 
    </form> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Fotboll 4v4 
 
     </td> 
 
     <td> 
 
      0.3 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Brännboll 
 
     </td> 
 
     <td> 
 
      1.2 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Badminton 2v2 
 
     </td> 
 
     <td> 
 
      1.5 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Gruppmöte 
 
     </td> 
 
     <td> 
 
      2.2 km 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

使用位置是：固定;您#activities div的

爲了保持桌面的「中間」爲你穿上它，你可能會需要把它拿出來#activities股利。

Answer 3

#activities { 
    padding-top: 0; 
} 

#activities h2 { 
    margin-top: 0; 
} 

Answer 4

您可以在#activities上使用position: sticky屬性。

要小心，它沒有在all web browsers執行。但是，您可以使用this polyfill：https://github.com/filamentgroup/fixed-sticky對於那些不支持該屬性。

希望能夠幫助您;）

Answer 5

嗯......如果我理解正確的話，你希望你的DIV留在總是頁面頂部？

嘗試改變position: relative;到position: fixed;。 這可能會完成你所需要的。

Answer 6

我想你想移除margin和padding到body元素將其添加到css文件

body { padding:0;margin:0;} 

或只加絕對位置activities和right:0

#activities { position:absolute;right:0;}