Links Ausrichten-Label - Right-Align-Wählen Sie Element (CSS)

Ich habe ein Formular, dass ich möchte, um die Anzeige der label Linksbündig und die Formular-Steuerelement-Rechtsbündig ausgerichtet. Ich habe versucht, es zu bekommen, um die Arbeit mit einem float:right auf dem Formular-Steuerelement (in diesem Fall ) und dann die Anwendung, die clearfix Klasse an aber die clearfix scheint nicht zu funktionieren auf meinem select-box.

Gibt es etwas falsch hier oder ist clearfix funktionieren nicht auf einem select-element?

Wenn ich dies tun jedoch, die select-box immer noch erstreckt sich außerhalb der unteren mit div.

Mein Code:

<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
  select.clearfix {
    zoom: 1;  
  }  
</style>
<![endif]-->

<div id="triage">
    <div id="category-select">
          Category: 
          <select class="ipad-dropdown clearfix" id="category" name="category">
                <option value="A">A - Emergency
                <option value="B">B - Urgent
                <option value="C">C - ASAP
                <option value="D" selected>D - Standard
          </select>
    </div>
</div>
  • Wenn Sie möchten, wählen Sie die box außerhalb der box mit der Grenze, dann müssen Sie die select-tag außerhalb des "Kategorie-wählen Sie" div.
InformationsquelleAutor Barbs | 2011-12-07
  1. 6

    Wenn die select element ist die höchste Sache, warum nicht schwimmen das label? Sie können auch die Gelegenheit ergreifen, um es eigentlich ein label, statt nur text in einem div. Hier das CSS:

    #category-select {
    left: 0px;
    top: 0px;
    width: 350px;
    border: 1px solid #666;
    text-align: right;
}
#category-select label {
    float: left;
    margin: 1px;
}

    Hier die HTML-Ausgabe:

    <div id="triage">
    <div id="category-select">
        <label for="category">Category:</label>
        <select class="ipad-dropdown clearfix" id="category" name="category">
            <option value="A">A - Emergency</option>
            <option value="B">B - Urgent</option>
            <option value="C">C - ASAP</option>
            <option value="D" selected>D - Standard</option>
        </select>
    </div>
</div>

    Hier ist die demo.

    • Vielen Dank, dass ist eine sehr elegante Lösung und es ist geholfen mit einem anderen problem ich hatte im IE7. Prost!
    InformationsquelleAutor robertc
  2. 0

    Da Sie schwimmend das select-element, es wird keinen Einfluss auf die Höhe des enthaltenden div-mehr. Versuchen Sie, einige Polsterung element enthalten: http://jsfiddle.net/LZVhN/1/ (außerdem noch die relative Positionierung der select -)

    • Natürlich hast du Recht. Ich dachte, hinzufügen Polsterung würde einfach die Umschalttaste der select-box herum, als gut. Vielen Dank für die Hilfe.
    InformationsquelleAutor ptriek
Schreibe einen Kommentar