CSSボタンを親DIV内に完全に保持するにはどうすればよいですか？

Question

コンテンツエリアにカスタムリンクを維持できません。私は、このHTML

#createBtn { 
 
    margin-bottom: 20px; 
 
    width: 100%; 
 
    padding: 15px; 
 
    border-radius: 5px; 
 
    border: 1px solid #7ac9b7; 
 
    background-color: #4180C5; 
 
    color: aliceblue; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
}

<div id="userNotificationsWrapper"> 
 

 
    <p>You have no notifications.</p> 
 

 
    <div><a id="createBtn" data-method="get" href="/user_notifications/new">Create Notification</a></div> 
 

 
</div>

を持っていますが、リンク/ボタンは、私のコンテンツ領域（ID = "userNotificationsWrapper" とDIV）の下の境界線の上にいっています。コンテンツエリアにリンク/ボタンを完全にキャプチャして、メッセージの後の次の行に整列させたいと思います。

私は問題を実証するためにフィドルを作成しました - https://jsfiddle.net/b3hxko01/。

Answer 1

次の2つの問題を抱えているのです。最初はwidth: calc(100% - 750px);は#userNotificationsWrapperです。あなたはおそらくmax-width: 220pxまたはそれに似たもので置き換えることを望んでいます...？

width: 100%;は#createBtnです。私はそれを次のように置き換えます：

#createBtn { 
    display: inline-block; 
    box-sizing: border-box; 
    margin-right: 10px; 
    width: calc(100% - 20px); 
} 

updated fiddle私のCSSは最後に追加されます。あなたのことに触れていない。それぞれの小道具を自由に検索して、彼らが何をしているかを見てください。

Answer 2

このようなものが欲しいですか？ Demo

このスクリーンショットを添付していない場合は、

ここでは、CSS

#userNotificationsWrapper { 
margin: 0 auto; 
background-color: #ffffff; 
border: 1px solid #C7CDD1; 
width: 75%; 
font-family: Acme; 
font-size: 18px; 
height:100px; 
padding-left: 10px; 

}