2 Tasten in einem Formular

Question

Ich habe derzeit ein Formular mit 1 Schaltfläche, und wenn ich versuche, einen weiteren Button hinzuzufügen, wird die ganze CSS geschraubt.

Dies ist, wie ich es haben wollen wie folgt aussehen: http://prntscr.com/gfuvi8

Aber wenn Sie diese Zeile unter dem Button Dies ist <a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>

einreichen hinzufügen, was ich bekommen: http://prntscr.com/gfuwka

.tablesection { 
 
    \t padding: 20px; 
 
    \t border-left: 1px solid #e4e4e4; 
 
    \t border-right: 1px solid #e4e4e4; 
 
    \t border-bottom: 1px solid #e4e4e4; 
 
    \t background: #ffffff; 
 
    } 
 
    
 
    .tablesection label { 
 
    \t width: calc(50% - 10px); 
 
    \t float: left; 
 
    \t margin: 0px 0px 10px 0px; 
 
    } 
 
    
 
    .tablesection label:nth-child(odd) { 
 
    \t margin: 0px 20px 10px 0px; 
 
    } 
 
    
 
    .tablesection input, .tablesection select, .tablesection textarea { 
 
    \t width: calc(50% - 10px); 
 
    \t margin: 0px 0px 20px 0px; 
 
    \t padding: 10px; 
 
    \t display: block; 
 
    \t float: left; 
 
    \t border: 1px solid #cecece; 
 
    \t -webkit-border-radius: 0; 
 
    \t border-radius: 0; 
 
    } 
 
    
 
    .tablesection textarea { 
 
    \t resize: vertical; 
 
    } 
 
    
 
    .tablesection input:nth-child(odd), .tablesection select:nth-child(odd) { 
 
    \t margin: 0px 20px 20px 0px; 
 
    } 
 
    
 
    .tablesection input { 
 
    \t padding: 11px 10px; 
 
    \t width: calc(50% - 10px); 
 
    } 
 
    
 
    .tablesection input.submit { 
 
    \t width: auto; 
 
    \t border: 0px; 
 
    \t margin: 0px 0px 0px 0px; 
 
    \t background: #54809b; 
 
    \t color: #ffffff; 
 
    \t text-decoration: none; 
 
    \t display: block; 
 
    \t float: none; 
 
    \t font-size: 11px; 
 
    \t padding: 12px 20px; 
 
    \t -webkit-transition: background 0.5s linear; 
 
    \t -moz-transition: background 0.5s linear; 
 
    \t -ms-transition: background 0.5s linear; 
 
    \t -o-transition: background 0.5s linear; 
 
    \t transition: background 0.5s linear; 
 
    \t clear: both; 
 
    } 
 
    
 
    .tablesection input.submit:hover { 
 
    \t background: #4d758d; 
 
    } 
 
    
 
    .tablesection input.submit::before { 
 
    \t display: block; 
 
    \t content: ' '; 
 
    \t clear: both; 
 
    }

<div class="tablesection"> 
 

 
\t <form action="" method="post"> 
 
\t 
 
\t \t <label for="usd">USD</label> 
 
\t \t <label for="cad">CAD</label> 
 

 
\t \t <input id="usd" type="text" name="usd" value="<?php echo $siteUsd; ?>" maxlength="10" required="required" /> 
 
\t \t <input id="cad" type="text" name="cad" value="<?php echo $siteCad; ?>" maxlength="10" required="required" /> 
 
\t 
 
\t \t <label for="gbp">GBP</label> 
 
\t \t <label for="eur">EUR</label> 
 

 
\t \t <input id="gbp" type="text" name="gbp" value="<?php echo $siteGbp; ?>" maxlength="10" required="required" /> 
 
\t \t <input id="eur" type="text" name="eur" value="<?php echo $siteEur; ?>" maxlength="10" required="required" /> 
 
\t \t 
 
\t \t <label for="aud">AUD</label> 
 
\t \t <label for=""></label> 
 

 
\t \t <input id="aud" type="text" name="aud" value="<?php echo $siteAud; ?>" maxlength="10" required="required" /> 
 

 
\t <div class="clear"> 
 
\t </div> 
 
\t <input type="submit" class="submit" value="Update Exchange Rates" /> 
 
\t <a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a> 
 

 
\t </form> 
 
</div>

.content a.button:first-of-type { 
    margin: 20px 0px 0px 0px; 
} 

.content a.button { 
    background: #54809b; 
    color: #ffffff; 
    text-decoration: none; 
    display: block; 
    float: left; 
    margin: 20px 0px 0px 16px; 
    font-size: 11px; 
    padding: 12px 20px; 
    -webkit-transition: background 0.5s linear; 
    -moz-transition: background 0.5s linear; 
    -ms-transition: background 0.5s linear; 
    -o-transition: background 0.5s linear; 
    transition: background 0.5s linear; 
} 

.content a.button:hover { 
    background: #4d758d; 
} 

.content a.button i { 
    margin: 0px 4px 0px 0px; 
    font-size: 10px; 
} 

, wenn es nur zwei Tasten wie diese sind:

<a href="?do=search" class="button"><i class="fa fa-search"></i> Search Coupons</a> 
<a href="?do=add" class="button"><i class="fa fa-plus"></i> Add Coupon</a> 

dann seine feine und sie sind in der Nähe von einander das Problem ist in Form

Answer 1

Das Element input.submit ist nicht schwebend, während das a.button ist. Dies drückt den a.button so, dass er unterhalb der input.submit liegt, und die Ränder sind nicht konsistent, so dass sie sich nicht aufreihen würden, wenn dies nicht passiert. Ich werde vorschlagen, zwei Möglichkeiten, um es zu beheben, eine minimale (nur zwei CSS-Attribute geändert), und eine, die ich denke, ist leichter zu lesen und zu pflegen, aber ändert sich die Struktur Ihres CSS etwas.

In beiden Fällen schlage ich vor, die Ränder zu ändern. Wenn Sie den 16px-Rand auf der rechten Seite platzieren, müssen Sie ihn nicht mit einer separaten Regel aus dem ersten Element entfernen, und Ränder, die das enthaltende Element überlaufen, sind nicht relevant, da sie bei der Berechnung von Breite und Höhe nicht berücksichtigt werden.

Minimalversion
Schritt 1: die input.submit zu float: left, wie die .Taste
Schritt 2: der Spielraum für input.submit ändert die .Taste oder umgekehrt anzupassen,
zB input.submit {Rand: 20px 16px 0px 0px; } `

.tablesection input.submit { 
     width: auto; 
     border: 0px; 
     margin: 20px 16px 0px 0px; /* copy the a.button margins */ 
     background: #54809b; 
     color: #ffffff; 
     text-decoration: none; 
     display: block; 
     float: left; /* left instead of none keeps subsequent floats on the same line */ 
     font-size: 11px; 
     padding: 12px 20px; 
     -webkit-transition: background 0.5s linear; 
     -moz-transition: background 0.5s linear; 
     -ms-transition: background 0.5s linear; 
     -o-transition: background 0.5s linear; 
     transition: background 0.5s linear; 
     clear: both; 
    } 

Das wird sie inline bekommen, danach werden Sie wahrscheinlich beide auf eine einheitliche Höhe setzen wollen.

besser (meiner Meinung nach) Version Sie haben eine Menge gemeinsam genutzter Stile zwischen input.submit und a.button - Sie können prüfen, diese in eine gemeinsame .button Klasse kombiniert (das Fehlen eines Tags in diesem Selektor beachten Sie, dass dies bedeutet, dass die Regel gilt für alles mit der Klasse).
Hier würde ich eine konsistente und einheitliche float: left; Margen gesetzt (zB 20px 16px 0px 0px)
Wenn Sie noch bestimmte Stile für input.submit zu tun, können Sie das Element beide Klassen geben, und sie werden getrennt angewendet werden.

.content .button { 
 
    background: #54809b; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    display: block; 
 
    float: left; 
 
    margin: 20px 16px 0px 0px; 
 
    font-size: 11px; 
 
    padding: 12px 20px; 
 
    -webkit-transition: background 0.5s linear; 
 
    -moz-transition: background 0.5s linear; 
 
    -ms-transition: background 0.5s linear; 
 
    -o-transition: background 0.5s linear; 
 
    transition: background 0.5s linear; 
 
} 
 

 
.content .button:hover { 
 
    background: #4d758d; 
 
} 
 

 
.content .button i { 
 
    margin: 0px 4px 0px 0px; 
 
    font-size: 10px; 
 
} 
 
.tablesection input.submit { 
 
    /* Styles that are unique to input.submit */ 
 
}

<div class ="content"> 
 

 
    <div class="tablesection"> 
 

 
     <input type="submit" class="button submit" value="Update Exchange Rates"> 
 
     <a href="?do=fetch" class="button"> 
 
      <i class="fa fa-refresh"></i> 
 
      Fetch Exchange 
 
     </a> 
 

 
    </div> 
 

 
</div>

EDIT: Beide Lösungen teilen sich ein Fehler, der diese Schwimmelemente wirken sich nicht auf die Höhe ihres Behälters ist. Um dies zu umgehen, können Sie entweder ein Dummy-Element nach ihnen platzieren, um den Container aufzufüllen, zB: <div style="height:60px;"></div>. Die wichtige Sache in dieser Methode ist, dass die Höhe des Dummy div die gleiche wie die Höhe + oberen Rand der floated Elemente ist. Alternativ können Sie auch die float:left insgesamt entfernen und stattdessen beide auf display:inline-block setzen, was beim Layout viel einfacher zu handhaben ist als Floats.

Answer 2

Sie können ihre Positionen relative und fügen Sie einen float Stil machen:

.btn-float {  
 
    position: relative; 
 
    width: auto; 
 
    float: left; 
 
    padding-left: 15px; 
 
}

<input class="btn-left" type="submit" class="submit" value="Update Exchange Rates" /> 
 
<a class="btn-right" href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>

Answer 3

.button { 
 
     width: 23%; 
 
     display: block; 
 
     text-align: center; 
 
     line-height: 3rem; 
 
     height: 3rem; 
 
     font-size: 1.2rem; 
 
     border: 1px solid #ccc; 
 
     background: #fafafa; 
 
    } 
 
    .button-container{ 
 
     margin-bottom: 20px; 
 
     width: 100%; 
 
    } 
 
    .button-container::after{ 
 
     content: ''; 
 
     display: block; 
 
     visibility: hidden; 
 
     clear: both; 
 
    } 
 
    .button-float{ 
 
     margin-left: 2%; 
 
     float: left; 
 
    }

<div class="button-container"> 
 
    <button class="button button-float">BTN-1</button> 
 
    <button class="button button-float">BTN-2</button> 
 
</div> 
 

 
<div class="button-container"> 
 
    <a href="?do=fetch" class="button button-float"><i class="fa fa-refresh"></i> Fetch Exchange</a> 
 
    <a href="?do=fetch" class="button button-float"><i class="fa fa-refresh"></i> Fetch Exchange</a> 
 
</div>

Ich glaube, ich weiß, wo falsch ist. Sie sollten diese beiden Tasten bei einem Tauchgang oder etwas anderem einwickeln und float left einstellen und dann den Schwimmer am DIV löschen.

wenn Sie Bootstrap verwenden, können Sie diese Tasten in einem col-md-12

wickeln gerade Ziel button Schwimmer, dann löschen Sie den Schwimmer an seinem Vater Behälter zu lassen ist.

---

hinzugefügt

OK, fügen Sie einfach .button-container, .button-container::after, .button-float in Ihrer CSS-Datei, und wickeln Sie Ihre 2 btns mit div mit .button-container Klasse, fügen .button-float Klasse zu Ihrem 2 btns, das wird tun .

Hoffe, das kann Ihnen helfen.