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

Ich muss eine Taste und eine tex-box sitzen neben einander und Sie haben zum ausrichten von up perfekt, als wenn man größer ist als der andere, dann wird es sofort spürbar.

In der Regel ich würde nicht die Mühe, über die kleinen Unterschiede zwischen den Browsern, aber diese beiden Eingangs sitzen in einer sehr prominenten position auf jeder Seite und sind ein wichtiges feature von der Seite, so dass Sie haben, richten Sie perfekt in allen gängigen Browsern und zoom-Stufen.

Hat jemand einen Tipp, wie Sie diese erreichen.

Nur als ein Beispiel, was ich versuche zu erreichen: das neue google-Startseite. Nach dem Start geben Sie die AutoVervollständigen-kicks in und die such-Feld bewegt wird, auf der Oberseite mit einem blauen Knopf perfekt ausgerichtet auf das Feld text. Es funktioniert perfekt, cross-browser, sondern seine Bezeichnung in einer Tabelle. Hat, deuten darauf hin, dass dies möglicherweise der beste Weg, dies zu erreichen?

InformationsquelleAutor der Frage David | 2011-07-17

Ich würde vorschlagen, versuchen, style-parent-Elements von der input/button pairing (eine fieldset in meinem Beispiel), damit eine gemeinsame font-sizeund font-familydann mit em Messungen für styling Dimensionen/Polsterung/Margen für die untergeordneten Elemente. Idealerweise styling alle Kind-Elemente mit dem selben CSS.

Angesichts der folgenden mark-up:

<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 vorschlagen, etwas ähnlicheaber angepasst an Ihre speziellen design, die 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 Klärung, dass dies zu replizieren bzw. zu reproduzieren den Stil der Google-begleitendes text-input/submit-button:

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.

Obgleich das oben funktioniert in Chromium 12.x und Opera 11.5 (Ubuntu 11.04), Firefox scheint zu zeigen, eine zusätzliche oder zwei pixel in der letztgenannten demonstration.

InformationsquelleAutor der Antwort David Thomas

6

Ich habe ziehen meine Haare für Stunden versucht, dies zu erreichen. Nach viel Forschung und Experimentieren, hier ist das Rezept für die Lösung des OP - Problems in (zumindest aktuelle Versionen) Chrome, Firefox, IE, Opera und Safari:
1. Verwenden die gleichen CSS über das box-Modell für alle Arten von Knoten, die Sie brauchen, um auszurichten (button, input, select);
2. TUN geben Sie die Grenze explizit (oder zumindest seine Breite);
3. NICHT geben Sie die Höhe explizit.
Ja, das ist alles dort ist zu ihm. Hier ist die minimalistische CSS, die das gewünschte Ergebnis erzeugt:
```
select, input, button {
    border-width: 0px;
}
```
Benötigen Sie weitere styling, fühlen Sie sich frei, um Farbe, Polsterung und Margen -- alles in Ordnung. Aber egal, was Sie tun, NICHT geben Sie die Höhe explizit. Das ist der einzige deal breaker, weil jeder browser berechnet die Höhe unterschiedlich; einige lassen Sie eine zusätzliche oder zwei pixel über dem wählen und nicht die Schaltfläche, einige verlassen Sie oberhalb der Taste und nicht select, und einige funktionieren als erwartet.

Für die Aufzeichnung, Chrome scheint zu sein, die am konsequentesten in dieser Hinsicht (das ist, wenn Sie tun, geben Sie die Höhe) -- aber dann wieder, who cares.

InformationsquelleAutor der Antwort Bogdan Stăncescu
4

Ich denke, das ist sehr bulletproof:

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

Auf beide Elemente nur verwenden:
```
display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;
```
Und "normalisieren.css" - das ist alles. Sieht gut aus auf iPhone, zu:

InformationsquelleAutor der Antwort Henning Fischer

Ich habe viele Quellen im WEB, wie Sie es tun das beste, cross-browser, theme-unabhängig. Ich hoffe, ich habe die Lösung, immerhin ist es nicht 100% (es muss gekürzt werden, die durch vertikale CSS-padding). Mein problem war zu haben label und text-Eingabe mit der selben Breite und kompakte.

Gewünschten Ergebnis:
CSS - Exakt gleiche Höhe und Ausrichtung von Schaltfläche und Eingabetextfeld
Die Lösung fand ich durch mehrere Experimente beschrieben, die von meinem blog: 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>

Meine experimentelle code wird gemeinsam von JSFIDDLE: css-exact-same-height-and-alignment-of.html

InformationsquelleAutor der Antwort Vaclav Svara

0

Wenn Sie versuchen, zu erreichen, pixel-perfekte Dimensionen in einem cross-browser-Weise, die sehr erste, was Sie tun sollten, ist zu erwägen, die Implementierung eines CSS-reset. Ich bevorzuge HTML5 Boilerplateaber es gibt andere, die Sie finden können aus googeln.

Den CSS-reset ist wirklich grundlegend in die Normalisierung der cross-browser-Unterschiede (vor allem beim Umgang mit Formularen).

InformationsquelleAutor der Antwort Moses

IE: Sie können den Stil, die Dinge anders durch die Verwendung von conditional stylesheets:

<!--[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 {
  //
}

InformationsquelleAutor der Antwort madflow

0

Ich versuche, dies zu lösen, für Tage und jede Lösung ist nicht ganzes und nicht in anderen Browsern.

Ich finde, dass dieser code die Arbeit machen:
```
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;
```
Habe ich aktualisiert Fiddle - https://jsfiddle.net/p9maozk2/

InformationsquelleAutor der Antwort Dampas
0

Verwenden Sie ein hintergrund-div mit einem Bild für die Eingabe. Das ist viel leichter konsistent zu halten. Auch die absolute Positionierung ist gut für diese Art von situation.

edit: ich schrieb diese Antwort vor 5 Jahren, es gibt bessere Möglichkeiten, nun.

InformationsquelleAutor der Antwort Ilia Choly
0

Ihre andere option ist die Verwendung Bootstrap. Ich lösen dieses Problem durch die Zuweisung der Klasse "input-Gruppe" der div , umschließt den Eingang und die Taste/en.

InformationsquelleAutor der Antwort Nadia Hristova

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.