block_head分區中的HTML CSS表單（組合框）垂直對齊

Question

編輯4：問題似乎已經解決了。當我在編寫另一部分代碼時，組合框突然正確對齊。我不知道它爲什麼能起作用，但嘿，它的工作原理！ ：d我現在可以舉報此解決

我有一個表格（組合框）只是旁邊的一個分塊完美的作品中在block_head部門的H1標題。我可以使用CSS文件將其對齊到我想要的位置。另一方面，我有另一個相同位置的combobox（我的意思是，我基本上使用相同的代碼），它位於block_head的底部，並且CSS修改不會使其移動，除了float：left /對。

下面是一些涉及該問題的代碼。

組合框所散發出來的好：

<div class = "block"> 
    <div class="block_head"> 
     <div class="bheadl"></div> 
     <div class="bheadr"></div> 
     <h1>Métriques d'utilisation</h1> 
    </div> 
    <div class="block_content"> 
     <!--Bloc CLIENT X--> 
     <div class="block small left"> 
      <div class="block_head"> 
       <div class="bheadl"></div> 
       <div class="bheadr"></div> 
       <h2> 
        Client : 
       </h2> 
       <form method = "post" action="#" name = "clientForm"> 
        <p> 
         <select name = "client" onchange="clientForm.submit();"> 
         <?php      
          foreach($_SESSION['clientList'] as $client) { 
           $selected = ($client == $_SESSION['currentClient']) ? 'selected = "selected"' : ''; 
           echo "<option value = $client $selected>$client</option>"; 
          } 
         ?> 
         </select> 
        </p> 
       </form> 
      </div> 
... 

組合框是錯出來：對於block_head

<div class = "block"> 
    <div class="block_head"> 
     <div class="bheadl"></div> 
     <div class="bheadr"></div> 
     <h1>Tests</h1> 
     <form id="branch" class="branch" method="post" action="#"> 
      <p> 
       <select onchange="changeBranch(this.value)"> 
       <?php 
        $app->branch = $this->currentBranch; 

        foreach($GLOBALS['branchList'] as $entry) { 
         $selected = ($entry == $branch) ? 'selected="selected"' : ''; 
         echo "<option value=\"{$entry}\" {$selected}>{$entry}</option>\n"; 
        } 
       ?> 
       </select> 
      </p> 
     </form> 
     <?php 
      //Afficher la sélection de la branche 
      //$app->showBranchForm(); 
     ?> 
    </div> 
... 

CSS代碼：

.block .block_head { 
    height: 54px; 
    line-height: 54px; 
    background: url(../images/bhead.gif) 0 0 repeat-x; 
    overflow: hidden; 
    } 

.block .block_head .bheadl { 
    width: 20px; 
    height: 54px; 
    float: left; 
    background: url(../images/bheadl.gif) top left no-repeat; 
    } 

.block .block_head .bheadr { 
    width: 20px; 
    height: 54px; 
    float: right; 
    background: url(../images/bheadr.gif) top right no-repeat; 
    } 

.block .block_head h1 { 
    font-family: "Trebuchet MS", Arial, sans-serif; 
    font-size: 25px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #555; 
    text-shadow: 1px 1px 0 #fff; 
    float: left; 
    } 

.block .block_head h2 { 
    font-family: "Trebuchet MS", Arial, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #555; 
    text-shadow: 1px 1px 0 #fff; 
    float: left; 
    } 

.block .block_head ul { 
    float: right; 
    text-transform: uppercase; 
    font-size: 11px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #fff; 
    } 

.block .block_head ul li { 
    display: inline; 
    padding: 3px 0; 
    padding-left: 20px; 
    background: url(../images/phs.gif) 7px center no-repeat; 
    } 

.block .block_head ul li.nobg { background: none; } 

.block .block_head ul li a { 
    text-decoration: none; 
    color: #666; 
    outline: none; 
    } 

.block .block_head ul li.active a { color: #888; } 
.block .block_head ul li a:hover { color: #008ee8; } 

.block .block_head form { 
    float: left; 
    padding: 17px 10px; 
    height: 34px; 
    line-height: 24px; 
    } 

.block .block_head form .text { 
    width: 129px; 
    height: 15px; 
    padding: 5px 10px 5px 25px; 
    border: 0; 
    font-size: 11px; 
    color: #999; 
    margin: 0; 
    background: url(../images/srch.gif) left center no-repeat; 
    } 

.block .block_head form .text:focus { 
    color: #666; 
    background: url(../images/srch_.gif) left center no-repeat; 
    } 

.block .block_head select { 
    text-transform: none; 
    } 

任何人都可以引導我，如何我可以修復？

正如我所說，我試着玩CSS文件，但它沒有做任何事情。 我也嘗試將表單移動到不同的block_heads。

我會發布的圖片，但我需要moar聲譽-_-」

謝謝！

編輯：有一些鏈接到問題的圖片：

Good combobox

Bad combobox

EDIT2：新增完整block_head CSS代碼

EDIT3：碰撞！

編輯4：這個問題似乎已經解決了。當我在編寫另一部分代碼時，組合框突然正確對齊。我不知道它爲什麼能起作用，但嘿，它的工作原理！ ：d 我現在可以舉報此解決

Answer 1

我會問這樣的評論，但我目前的信譽不允許我:( 你有鏈接到這個例子，因爲它會很困難瞭解你的問題是什麼，甚至從工作中發佈兩套CSS，如果你不這樣做，它們是否意味着並排出現？例如：

=== H1 === +++組合+++

編輯：

感謝您的額外scre恩抓住。我認爲這是因爲圍繞選擇的「P」標籤而發生的。嘗試從P刪除保證金：

.block .block_head form p { 
margin: 0; 
} 

看到這裏例如：

http://jsfiddle.net/XBdeL/2/