如何防止按钮在页面上重叠文本？

Question

I want to create a button that is located beneath a message I present to a user. So I have this HTML

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

and then I have this styling for my button (link) ...

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

#createBtn:hover {
  background-color: black;
}

but if you look at my demo -- https://jsfiddle.net/7rxdh37h/ , you can see that the button is hovering over the text, instead of appearing beneath it and staying in the content area. I can't figure out why this is or how to fix it. Any ideas?

Answer 1

First, you have the button in the wrong div. You need to move it out of the text div. Next, add display block and then make the size of the button/margin area.

https://jsfiddle.net/7rxdh37h/1/

<div id="w">
    <header id="logo">CryptoCurrency Index</header>

    <nav id="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Member Currencies</a></li>
        <li><a href="/user_notifications/" id="notifications">My Notifications</a></li>
    <li id="logout"><a href="/logout">Log Out</a></li>
    </ul>
</nav>

<div id="content">
<div id="userNotificationsWrapper">

<p>You have no notifications.</p> 
</div>
<div class="buttonCreate">
    <a id="createBtn" data-method="get" href="/user_notifications/new">Create Notification</a></div>    
    </div>
      <footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>
</div>

#createBtn {
  margin-bottom: 20px;
  padding: 15px;
  display: block;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}
.buttonCreate{
  width: 30%;
  margin: 10px auto;
  display: block;
}

Answer 2

Perhaps display:table is what you are looking for. I simply added display:table and margin:auto and it worked:

 /* line 1, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* line 14, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ html { height: 101%; } /* line 15, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ body { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; background: #444 url("images/bg.png"); } /* line 17, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* line 18, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ ol, ul { list-style: none; } /* line 20, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ blockquote, q { quotes: none; } /* line 21, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* line 22, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ strong { font-weight: bold; } /* line 24, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ table { border-collapse: collapse; border-spacing: 0; } /* line 25, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ img { border: 0; max-width: 100%; } /* line 27, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #w { display: block; width: 100%; padding: 14px 15px; margin: 0 auto; margin-top: 45px; } /* line 35, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #content { display: block; background: #e0e0e0; padding: 14px 20px; text-align: center; } /* line 42, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #logo { display: block; border: 1px solid #232323; border-bottom-width: 0; font-family: 'chicagoflfregular'; font-size: 20px; color: #ffffff; width: 100%; } /* line 52, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #logobg { display: block; width: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* top navigation */ /* line 61, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #navigation { display: block; height: 35px; background-color: #131313; background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#131313)); background-image: -webkit-linear-gradient(top, #202020, #131313); background-image: -moz-linear-gradient(top, #202020, #131313); background-image: -ms-linear-gradient(top, #202020, #131313); background-image: -o-linear-gradient(top, #202020, #131313); background-image: linear-gradient(top, #202020, #131313); } /* line 73, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #navigation ul { list-style: none; padding: 0px 7px; } /* line 75, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #navigation ul li { display: inline; float: left; } /* line 76, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #navigation ul li a { display: block; padding: 0 8px; color: #fff; font-size: 1.5em; text-decoration: none; line-height: 35px; font-weight: bold; margin-right: 6px; text-shadow: 1px 1px 1px #000; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } /* line 90, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #navigation ul li a:hover { color: #a8d6e7; } /* line 92, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #fixedbar { display: none; position: fixed; top: 0; width: 100%; height: 80px; background: rgba(0, 0, 0, 0.75); } /* line 101, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #fixednav { display: block; width: 710px; margin: 0 auto; padding: 0px 25px; } /* line 108, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #fixednav li a { display: block; float: left; font-size: 1.75em; font-weight: bold; color: #96aed8; line-height: 80px; text-decoration: none; padding: 0px 8px; margin-right: 6px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } /* line 122, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #fixednav li a:hover { color: #fff; background: rgba(0, 0, 0, 0.3); } /* line 127, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/custom.scss */ #indexInfo { background-color: #fff; } /* line 1, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ #resize { position: absolute; margin-top: 100px; margin-left: 50px; color: #41c54c; } /* line 8, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ div#envelope { width: 55%; margin: 10px 30% 10px 25%; padding: 10px 0; border: 2px solid gray; border-radius: 10px; } /* line 15, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ form { margin: 4% 15%; font-family: Manuelle; font-size: 14px; } /* line 20, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ header { background-color: #4180C5; text-align: center; padding-top: 12px; padding-bottom: 8px; margin-top: -11px; margin-bottom: -8px; border-radius: 10px 10px 0 0; color: aliceblue; } /* line 31, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ .field { padding-top: 10px; } /* Makes responsive fields.Sets size and field alignment.*/ /* line 36, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ input[type=text] { margin-bottom: 20px; margin-top: 10px; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; box-sizing: border-box; /* added property */ } /* line 45, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ input[type=submit] { margin-bottom: 20px; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; background-color: #4180C5; color: aliceblue; font-size: 15px; cursor: pointer; } /* line 56, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */ #submit:hover { background-color: black; } textarea { width: 100%; padding: 15px; margin-top: 10px; border: 1px solid #7ac9b7; border-radius: 5px; margin-bottom: 20px; resize: none; } input[type=text]:focus, textarea:focus { border-color: #4697e4; } #currencyContent { width: 100%; display: flex; flex-wrap: wrap; } #userNotificationsWrapper { margin: 0 auto; background-color: #ffffff; border: 1px solid #C7CDD1; font-family: Acme; font-size: 18px; padding-left: 10px; } #userNotificationsTableWrapper h2 { font-size: 18px; } @media (max-width: 1200px) { #userNotificationsTableWrapper { width: 100%; } } #userNotificationsTable { width: 100%; } #userNotificationsTable tr { text-align: left; min-height: 30px; } #userNotificationsTable thead { background-color: grey; color: #fff; } #userNotificationsTable tr th { font-weight: bold; } .currency-row img, .currency-row .name { vertical-align: middle; } .currency-row { border-bottom: 1px solid #C7CDD1; } .currency-row img, .currency-row .name { vertical-align: middle; } .currency-row td { padding: 12px 0 12px 0; } #userNotificationsTable th { padding: 12px 0 12px 0; } #userNotificationsTable th:first-child { padding-left: 10px; } .currency-row td:first-child { padding-left: 10px; } .currency-title { white-space: nowrap; } .arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid black; vertical-align: middle; display: inline-block; } .arrow-down { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #f00; vertical-align: middle; display: inline-block; } #createBtn { margin-bottom: 20px; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; background-color: #4180C5; color: aliceblue; text-decoration: none; font-size: 15px; cursor: pointer; display: table; margin: auto; } #createBtn:hover { background-color: black; } 

  <div id="w"> <header id="logo">CryptoCurrency Index</header> <nav id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Member Currencies</a></li> <li><a href="/user_notifications/" id="notifications">My Notifications</a></li> <li id="logout"><a href="/logout">Log Out</a></li> </ul> </nav> <div id="content"> <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> 

You could also user display:block , but you'll have to specify a width.

Answer 3

You should use your button in this way:

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

In this way your button will be placed under the text

Answer 4

The problem is the tag is an inline element, which makes the padding not affect the surrounding elements. So if you add display: inline-block; it will remain inline without becoming the full width of a block element but will also apply the padding in the manner you are looking for.

While this will solve the problem, I think changing how you are implementing the styles/markup could be more syntactically accurate as @Vahid Boreiri pointed out.