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

时间：2017-09-07 15:36:16

标签： html css css3 button overflow

我想创建一个位于我向用户呈现的消息下方的按钮。所以我有这个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>

然后我为我的按钮设置了这个样式（链接）...... 

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

但如果您查看我的演示 - https://jsfiddle.net/7rxdh37h/，您会看到该按钮悬停在文字上方，而不是显示在其下方并停留在内容区域中。我无法弄清楚为什么会这样或如何解决它。有什么想法吗？

4 个答案:

答案 0 :(得分：0)

首先，你在错误的div中有按钮。你需要将它移出文本div。接下来，添加显示块，然后设置按钮/边距区域的大小。

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

答案 1 :(得分：0)

也许display:table正是您所寻找的。我只是添加了display:table和margin:auto，但它确实有效：

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

您也可以使用display:block，但您必须指定宽度。

答案 2 :(得分：0)

您应该以这种方式使用您的按钮：

#include <iostream>
#include <string>
using namespace std;

int main() {
   string userInput;

   userInput = "That darn cat.";

   if (userInput.find("darn ") > 0){
      cout << "Censored" << endl;
   }
   else {
      cout << userInput << endl;
   } //userText.substr(0, 7)

   return 0;
}

通过这种方式，您的按钮将被放置在文本

下

答案 3 :(得分：0)

问题是标签是一个内联元素，这使得填充不会影响周围的元素。所以如果你添加display：inline-block;它将保持内联而不会成为块元素的整个宽度，但也会以您要查找的方式应用填充。

虽然这可以解决问题，但我认为改变你实现样式/标记的方式可能在语法上更准确，就像@Vahid Boreiri指出的那样。

相关问题
最新问题