Macht Formularfelder erscheinen horizontale statt vertikale

Ich habe ein Formular, das erscheint vertikal:

<form action="roseresult.php" method="POST" id='rosesearch'>
<label>Latin Name:</label><input name='latin_name' type='text' />
<label>Common Name:</label><input name='common_name_name' type='text' /></br>
<label>Variety Type:</label><select name="variety">
            <option value="Any">Any</option>
            <option value="Climber/Rambler">Climber/Rambler</option>
            <option value="David Austin">David Austin</option>
            <option value="Floribunda">Floribunda</option>
            <option value="Groundcover">Groundcover</option>
            <option value="Hybrid Tea">Hybrid Tea</option>
            <option value="Patio/Miniature">Patio/Miniature</option>
            <option value="Shrub">Shrub</option></select>
<input name='search' type='submit' value='Search' />
</form>

Habe ich bearbeitet diese in css zu versuchen und machen es erscheinen horizontal, aber es scheint nicht zu funktionieren. Ich dachte float:left; würde es tun, aber es tut.

CSS:

#rosesearch {
width:400px;
border-color:#7f2e3f;
padding: 5px 500px 5px 5px;
float:left;
}

#rosesearch legend {
background-color:#7f2e3f;
width:200px;
font-size: 20px;
}

#rosesearch label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
font-size:1.1em;
float:left;
color:#000000;
}

#rosesearch input {
font-size:12px;
padding:4px 2px;
border:solid 1px #000000;
width:244px;
margin:2px 0 20px 10px;
color:#000000;
float:left
}

Gibt es eine andere Möglichkeit ich kann die form horizontal?

Hier ein jsFiddle der form geschrieben: jsfiddle.net/3Q7X4. Versuchen Sie, Holen Sie sich diese Steuerelemente alle in einer Zeile?
Ich habe 9-Felder - ich möchte Ihnen zu erscheinen nebeneinander, so dass in Essenz 5 Zeilen mit der letzten Zeile, die nur ein Feld, wenn Sie wissen was ich meine

InformationsquelleAutor user1278496 | 2012-04-22

css html

Haben Sie grundsätzlich zwei offensichtliche Optionen:

Legen Sie jedes paar von Eingaben, die Sie wollen zu inline in einem <div>,
wiederholen Sie diese wrapper-divs, die als Zeilen, bis alle Ihre Eingaben sind in
die form, oder
Erstellen Sie zwei "Säulen" - divs und dann die Eingänge in
die Reihenfolge, die Sie benötigen, um Sie.

#1 wird wahrscheinlich die einfachste und konsequenteste. Ich werde aktualisieren, die Geige, die ich oben gepostet um zu zeigen was ich meine: http://jsfiddle.net/3Q7X4/5/

HTML:

<form action="roseresult.php" method="POST" id='rosesearch'>
    <div class="form-row">
        <div class="editor-cell">
            <label>Latin Name:</label>
            <input name='latin_name' type='text' />
        </div>
        <div class="editor-cell">
            <label>Common Name:</label>
            <input name='common_name_name' type='text' />
        </div>
    </div>
    <div class="form-row">
        <div class="editor-cell">
            <label>Variety Type:</label>
            <select name="variety">
                <option value="Any">Any</option>
                <option value="Climber/Rambler">Climber/Rambler</option>
                <option value="David Austin">David Austin</option>
                <option value="Floribunda">Floribunda</option>
                <option value="Groundcover">Groundcover</option>
                <option value="Hybrid Tea">Hybrid Tea</option>
                <option value="Patio/Miniature">Patio/Miniature</option>
                <option value="Shrub">Shrub</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <input name='search' type='submit' value='Search' />
    </div>
</form>

CSS:

form#rosesearch
{
    width:700px;
}

#rosesearch legend {
background-color:#7f2e3f;
width:200px;
font-size: 20px;
}

#rosesearch label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
font-size:1.1em;
float:left;
color:#000000;
}

#rosesearch input {
font-size:12px;
padding:4px 2px;
border:solid 1px #000000;
width:244px;
margin:2px 0 20px 10px;
color:#000000;
float:left
}

#rosesearch div.form-row
{
    width:100%;
    display:block;
    margin-bottom:2em;
    overflow:auto;
    zoom:1;
}


#rosesearch div.form-row div.editor-cell
{
    float:left;
    width:300px;
    vertical-align:top;
}

EDIT: Soeben die Geige. Es ist ziemlich rau, aber ich hoffe, dass Sie sehen, was ich wollte.

danke Kumpel für die, ich gebe es zu gehen
hast du es geschafft, es zu tun, in der fiddle-für mich zum anschauen?
Nur wollte. Überprüfen Sie den link (die Versionsnummer ist anders). 🙂
das ist es, Kumpel! aber gibt es einen Weg, um das Feld neben der Beschriftung?
Ja: passen Sie die Breite der .editor-cell Regel zu berücksichtigen, für die label+input Breite. Sie würde auch wollen, stellen Sie sicher, die form ist breit genug, damit beide "Zellen" zu sitzen side-by-side - könnte am einfachsten sein, entfernen Sie die Breite in der Regel für die form.

InformationsquelleAutor Tieson T.

1

Weil #rosesearch und #rosesearch label breiten sind nicht groß genug, um enthalten alle Ihre Eingänge horizontal.

Müssen Sie die width oder größer zu entfernen und lassen Sie die browser damit umgehen.
- Ok danke Kumpel, aber wie bekomme ich es so, dass die Felder ausgerichtet. Sie scheinen alle über dem Platz. Und ich will die 5 Felder auf der einen Seite und 4 auf der anderen.
- Sie haben nur 3 Felder in deinem Beispiel... Ernsthaft?
- das war einfach nur eine kleinere version von dem, was ich habe, Kumpel. Nicht gonna setzen Sie den code auf hier bin ich?
InformationsquelleAutor Soufiane Hassou

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.