Ausrichten einer Schaltfläche mit einer Auswahlbox (HTML-Formulare)

-1

Ich versuche, ein Suchfeld auf einer Seite zu erstellen, die aus drei Auswahlfeldern (Dropdown-Menüs) und einer Schaltfläche besteht. aber ich kann sie nicht zur Aufstellung bringen. Das muss tausendmal gewesen sein, bevor es mir so viel Kummer bereitet.Ausrichten einer Schaltfläche mit einer Auswahlbox (HTML-Formulare)

In dem Bemühen, es zu vereinfachen und zu verstehen, was vor sich geht, habe ich die folgende minimalistische Seite erstellt.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 
</head> 

<body> 
    <table> 
     <tr> 
      <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1"> 
       <td bgcolor="#FF0000"> 
        <select class="searchbox" name="type" style="width:140px"> 
         <option value="">choose a style.....</option> 
         <option value="beach">Beach</option> 
         <option value="city">City</option> 
        </select> 
       </td> 
       <td bgcolor="#FF0000"> 
        <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C"> 
       </td> 
      </form> 
     </tr> 
    </table> 
</body> 
</html>

Das Ergebnis sieht wie folgt aus in Firefox,

dies in Chrome,

dies in IE9,

und dies in IE9 Compatibiity Ansicht.

Entschuldigung, ich darf keine Bilder posten, da ich ein Neuling bin, aber nehmen Sie es von mir, sie sind alle verschieden. Ich habe es nicht einmal gewagt, es in älteren IE-Versionen anzuschauen!

Wie kann ich die Auswahlbox in allen Browsern vertikal mit der Schaltfläche ausrichten? Ich muss etwas Offensichtliches vermissen: es ist keine Raketenoperation!

Quelle

2012-03-29 TrapezeArtist

Raketenoperation? das ist neu ... – Th0rndike

Sie müssen sich mit line-height und vertical-align ... und Theres keine wirkliche Notwendigkeit für einen Tisch spielen, und zumindest nicht in dem vereinfachten Beispiel, das du gepostet hast:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form action="" method="post" name="search1" id="search1"> 
<div style="background-color:red;padding:0;height:30px;line-height:30px;"> 
    <select class="searchbox" name="type" style="width:140px"> 
     <option value="">choose a style.....</option> 
     <option value="beach">Beach</option> 
     <option value="city">City</option> 
    </select> 
    <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;"> 
</div> 

</form> 

</body> 
</html>

Quelle

2012-03-29 10:18:22 poncha

Das ist interessant. Ich werde weggehen und es versuchen. Ich denke, ich brauche den Tisch in der echten Version, die etwas komplexer ist als die vereinfachte Version, mit der ich hier gespielt habe. – TrapezeArtist

Ausrichten einer Schaltfläche mit einer Auswahlbox (HTML-Formulare)

Antwort

Verwandte Themen