html und css: ausrichten wählen Sie, um den rechten Rand einer Tabelle

Betrachten Sie das folgende HTML-snippet. Der gewünschte Effekt ist, um eine dropdown positioniert direkt oberhalb einer Tabelle.

<!-- this is actually in a proper CSS class, not inline-->
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 

<form method="post">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>

Den oben rendert wie diese:

Tabelle und wählen Sie float right http://www.imagechicken.com/uploads/1253124526051538700.png

Frage: Wie kann ich schreiben, dass meine CSS-Positionierung zu erreichen wie in diesem mockup?

gewünschte http://www.imagechicken.com/uploads/1253124791005327900.png

InformationsquelleAutor p.campbell | 2009-09-16
  1. 3

    Hinzufügen clear: both; zu Ihrem Tisch CSS. Dies wird deaktivieren Sie das float div (mit dropdown) oben drauf.

    Aber warum gehst du nicht einfach text-align: right; Ihr div -, dann müssen Sie nicht haben, um Chaos mit floats und inline-divs. Das sollte auch funktionieren.

    InformationsquelleAutor Joost
  2. 0

    Eine Möglichkeit wäre, die absolute Positionierung, um die beiden divs.

    oder

    Andere Möglichkeit wäre die Verwendung von Tabellen. Zum Beispiel:

     <table>
    <tr><td>
    <form method="post">
    <div style="float:right;display:inline;">Show Me:
        <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
          <option>30</option>
          <option>50</option>
          <option>100</option>
        </select>
    </div>
    </form>
    </td></tr>
    <tr><td>
    <div>
    <div style="float:left; 
                min-height:1px;
                padding:15px 2% 20px;
                position:relative;
                width:96%;"> 
    hello world
    </div>
    </td></tr>
    </table>

    oder

    Hinzufügen noch ein div um das div hat float:right. Zum Beispiel:

    <form method="post">
<div style="float:left; width:300px">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</div>
<div>
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 
hello world
</div>
    • Immer vermeiden absolute positionierte divs, Wann immer möglich. Absolut positionierten Elemente nicht an der normalen layout-flow, so macht es sehr schwer, eine Struktur in die Seite.
    • Du hast Recht. Es ist sehr schwer zu pflegen sind eine Seite, die hat eine Menge der absoluten Positionierung. Wenn Sie wollen, um alles um 5 px rechts, u haben, um Stil zu ändern, alle Steuerelemente manuell zu 5px Recht. Ich hatte diese Erfahrung in der Vergangenheit. Aber es würde das problem lösen, dass pcampbell hatte erklärt, denke ich.
    InformationsquelleAutor ajitdh
  3. 0

    könnten Sie eine andere Zelle der Tabelle

    <table>
<tr>
<td colspan="2">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</td
</tr>
<tr>
<td>table head</td>
<td>table head</td>
</tr>
<tr>
<td>content1</td>
<td>ontent2</td>
</tr>
<tr>
<td>content3</td>
<td>content4</td>
</tr>
</table>

    diese Arbeit sollte.. oder könnte man den Einsatz von css. aber dies ist der Schnellste Weg, es zu tun:-? zumindest, bis Sie machen/finden Sie einige css. könnten Sie float left auf beiden divs

    InformationsquelleAutor DanTdr
Schreibe einen Kommentar