如何制作标题标题棒？

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;}