ヘッダータイトルをトップにするにはどうすればよいですか？

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 
} 

今margin-top: 0;であなたのdivのタイトルのためのクラスは、それがトップに滞在できるようになると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 divからテーブルを取り除く必要があります。

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

私はあなたがbody要素にマージンとパディングを削除CSSファイルに

body { padding:0;margin:0;} 

か、単にそれはすでにトップでactivitiesとright:0

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