it-swarm.com.de

CSS - Gleiche Höhe und Ausrichtung von Schaltfläche und Eingabetextfeld

Ich brauche einen Knopf und eine Tex-Box, die nebeneinander sitzen, und sie müssen sich perfekt ausrichten, als wäre einer größer als der andere, dann wird es sofort spürbar.

Normalerweise würde ich mich nicht um kleine Unterschiede zwischen den Browsern kümmern, aber diese beiden Eingaben sitzen auf jeder Seite an prominenter Stelle und sind ein wichtiges Merkmal der Website. Sie müssen sich also in allen gängigen Browsern und Zoomstufen perfekt ausrichten.

Hat jemand einen Rat, wie man das erreichen kann? 

Nur ein kurzes Beispiel dafür, was ich erreichen möchte: die neue Google-Startseite. Nachdem Sie mit dem Eingeben der automatischen Vervollständigung begonnen haben, wird das Suchfeld eingeblendet und das Suchfeld wird mit einer blauen Schaltfläche nach oben verschoben, die perfekt auf das Textfeld ausgerichtet ist. Es funktioniert perfekt browserübergreifend, ist aber in einer Tabelle markiert. Ist das der beste Weg, dies zu erreichen?

26
David

Ich würde vorschlagen, das übergeordnete Element der inputbutton-Paarung (in meinem Beispiel eine fieldset) zu stylen, um einen gemeinsamen font-size und font-family zu geben, und dann em-Messungen für das Anpassen der Abmessungen/Auffüllung/Ränder für die untergeordneten Elemente . Idealerweise werden alle untergeordneten Elemente mit dem gleichen CSS gestaltet.

Bei folgendem Aufschlag:

<form action="#" method="post">
    <fieldset>
        <label for="something">A label for the text-input</label>
        <input type="text" name="something" id="something" />
        <button>It's a button!</button>
    </fieldset>
</form>

Ich würde etwas _/ähnliches vorschlagen, das jedoch an Ihr spezielles Design angepasst ist, für das folgende CSS:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

JS Fiddle Demo .


Nach der Klarstellung, dass dies den Stil der nebeneinander liegenden Google-Schaltfläche für Texteingabe abgabe replizieren/reproduzieren soll:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label, input, button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,
button:focus {
    background-color: #acf;
    outline: none;
}

/ - JS Fiddle Demo .

Obwohl dies in Chromium 12.x und Opera 11.5 (Ubuntu 11.04) gut funktioniert, scheint Firefox in der letzten Demonstration ein oder zwei Pixel zu zeigen.

21
David Thomas

Ich habe stundenlang an den Haaren gezogen und versucht, dies zu erreichen. Nach langem Suchen und Experimentieren finden Sie hier das Rezept zur Lösung des OP-Problems in (zumindest aktuellen Versionen von) Chrome, Firefox, IE, Opera und Safari:

  1. Verwenden Sie dasselbe CSS für das Box-Modell für alle Knotenarten, die Sie ausrichten müssen (Schaltfläche, Eingabe, Auswahl).
  2. DOexplizit den Rand angeben (oder zumindest die Breite);
  3. NICHT - explizit die Höhe angeben.

Ja, das ist alles was dazu gehört. Hier ist das minimalistischste CSS, das die gewünschten Ergebnisse erzielt:

select, input, button {
    border-width: 0px;
}

Wenn Sie weiteres Styling benötigen, fügen Sie Farbe, Polsterung und Ränder hinzu - alles wird gut funktionieren. Aber egal was Sie tun, geben Sie die Höhe NICHT explizit an. Das ist der einzige Deal Breaker, da jeder Browser die Höhe anders berechnet. Einige lassen ein oder zwei zusätzliche Pixel über der Auswahl und nicht die Schaltfläche zurück, andere lassen sie über der Schaltfläche und nicht über der Auswahl, und einige funktionieren wie erwartet.

Für das Protokoll scheint Chrome diesbezüglich am konsequentesten zu sein (dh wenn Sie die Höhe angeben) - aber dann auch, wen interessiert das?.

6

Ich finde das sehr kugelsicher:

http://codepen.io/herrfischer/pen/pbkyoJ

Verwenden Sie für beide Elemente einfach: 

display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;

Und benutze "normalize.css" - das ist alles. Sieht auch auf dem iPhone gut aus:

 enter image description here

4
Henning Fischer

Ich habe viele Quellen in WEB geprüft, wie sie am besten, browserübergreifend und themenunabhängig funktionieren. Ich hoffe, ich habe eine Lösung, aber es ist nicht 100% (es muss durch vertikale CSS-Auffüllung getrimmt werden). Mein Problem war, dass Beschriftungen und Texteingaben mit der gleichen Breite und Kompaktheit hat.

Gewünschtes Ergebnis: Wished resultDie Lösung, die ich in mehreren Versuchen gefunden habe, wird in meinem Blog beschrieben: http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

Lösung CSS:

div.lf-ui-label {
  margin: 0px;
  font-size: inherit;
  font-weight: bold;
  background-color: #CCCCCC;
  border-width: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px -10px;
  font-size: inherit;
  background-color: #2b55a8 !important;
  vertical-align: middle;
  border-width: 0px;
}
input.lf-ui-form-item {
  background-color: #3b3b3b;
  font-size: inherit;
  padding: 4px 7px 4px 7px;
  font-weight: bold;
  border: none 0px;
  outline: none;
}

HTML:

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value"      style="width:71%" />
</div>
<div  style="padding:10px; font-family: Calibri; font-size: 14px;">
  Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>

Mein experimenteller Code wird von JSFIDDLE gemeinsam genutzt: css-exakt-gleich-Höhe-und-Ausrichtung-of.html

1
Vaclav Svara

Ihre andere Option ist Bootstrap. Ich löse dieses Problem, indem ich der div Klasse " input-group " zuweisen, die die Eingabe und die Schaltfläche/en umschließt. 

0
Nadia Hristova

Wenn Sie versuchen, pixelgenaue Dimensionen über mehrere Browser hinweg zu erreichen, sollten Sie als Erstes einen CSS-Reset implementieren. Ich bevorzuge HTML5 Boilerplate , aber es gibt andere, die Sie beim Googeln finden können.

Der CSS-Reset ist für die Normalisierung der Unterschiede zwischen Browsern (insbesondere beim Umgang mit Formularen) von grundlegender Bedeutung.

0
Moses

Für IE: Sie können Dinge anders gestalten, indem Sie bedingte Stylesheets verwenden:

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

So würden Sie schreiben:

.ie6 .my-button-class {
  //
}
0
madflow

Ich versuche, dies seit Tagen zu lösen, und jede Lösung ist nicht vollständig und funktioniert nicht in verschiedenen Browsern.

Ich finde, dass dieser Code die Arbeit macht:

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

Ich habe Fiddle aktualisiert - https://jsfiddle.net/p9maozk2/

0
Dampas

2019 möchten Sie CSS Grid für Ihre Formulare verwenden, auch wenn sie nur eine Eingabe und eine Schaltfläche haben.

Das erspart viel Schmerz.

Ich habe viel mit meinem Arbeitsbeispiel zu tun, daher werde ich hier kein Arbeitsbeispiel veröffentlichen. Stattdessen sind hier die Dinge, die Sie wissen müssen.

Der äußere Container kann der form sein, CSS hierfür ist display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

Die Eingabe sollte eine Bezeichnung haben, von der ich annehme, dass sie ausgeblendet ist. Das CSS für die Eingabe hat also grid-column: 1; height: 100%; der Knopf hat grid-column: 2; height: 100%

Sie werden Ihre eigenen Dinge mit Rändern, Hintergründen, Abständen, Rändern, Randradien und ähnlichem tun.

Entscheidend für die Ausrichtung der Schaltfläche mit der Eingabe ist, dass die Rasterreihe eine feste Höhe in ems oder einer anderen vernünftigen, reaktionsfreudigen Einheit aufweist und Eingabe und Schaltfläche auf eine Höhe von 100% eingestellt sind.

Ich habe keine der oben genannten Antworten gefunden, die zu so prägnantem und verwaltbarem Code wie die CSS-Grid-Option führen, die für Firefox, Chrome und einen Webkit-basierten Browser geeignet ist.

Beachten Sie, dass Sie bei Verwendung von CSS Grid genau null div -Elemente in Ihrem Formular benötigen. Wenn Sie jedoch Feldsätze verwenden, müssen Sie diese möglicherweise auf display: content als CSS-Gitter funktioniert nicht mit fieldset.

0
Henry's Cat

Jeder, der versucht, es jetzt zu tun, fand ich, dass diese Lösung zu funktionieren scheint. Versuchen Sie Folgendes hinzuzufügen:

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

zu Ihrem aktuellen css auf beiden Elementen, die immer noch leicht fehlausgerichtet bleiben, und spielen Sie dann mit der oberen Polsterung im fehlausgerichteten Element. Ich habe das gefunden :

padding-top: 2px;

arbeitete für mich.

0
Odoug4