Wie verhindere ich, dass meine Schaltfläche Text auf meiner Seite überlappt?

Question

Ich möchte eine Schaltfläche erstellen, die unterhalb einer Nachricht liegt, die ich einem Benutzer präsentiere. Also ich habe dieses 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> 

und dann habe ich dieses Styling für meine Taste (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; 
} 

aber wenn man sich meine Demo zu finden - https://jsfiddle.net/7rxdh37h/, können Sie sehen, dass die Die Schaltfläche befindet sich über dem Text, anstatt darunter zu erscheinen und im Inhaltsbereich zu bleiben. Ich kann nicht herausfinden, warum das so ist oder wie man es repariert. Irgendwelche Ideen?

Answer 1

Zuerst haben Sie die Schaltfläche in der falschen div. Sie müssen es aus dem Text Div verschieben. Als nächstes fügen Sie den Anzeigeblock hinzu und nehmen dann die Größe des Knopf-/Randbereichs vor.

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

Vielleicht display:table ist das, was Sie suchen. Ich habe einfach display:table und margin:auto und es funktionierte:

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

könnten Sie auch Benutzer display:block, aber Sie werden eine Breite angeben.

Answer 3

Sie Ihre Schaltfläche auf diese Weise verwenden sollten:

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

Auf diese Weise wird Ihre Schaltfläche unter dem Text platziert werden

Answer 4

Das Problem der Tag ist ein Inline-Element, das macht die Polsterung nicht Auswirkungen auf die umliegenden Elemente. Also, wenn Sie Anzeige hinzufügen: Inline-Block; Es wird inline bleiben, ohne die volle Breite eines Blockelements zu erhalten, aber es wird das Padding in der von Ihnen gewünschten Weise anwenden.

Während dies das Problem lösen wird, denke ich, dass die Änderung, wie Sie die Stile/Markup implementieren, syntaktischer korrekt sein könnte, wie @Vahid Boreiri darauf hingewiesen hat.