2016-10-28 16 views
0

このコードはテキストと選択ボックスを水平に整列する方法は?

<table> 
    <tr> 
     <td NOWRAP><?php echo "Employee Birthdays for " . $monthName; ?></td> 
     <td width="100%"></td> 
     <td>Browse:</td> 
     <td valign="middle"> 
      <form method="get"> 
       <select type="submit" name="mo" onchange="this.form.submit()"> 
        <option value="01">January</option> 
        <option value="02">February</option> 
        <option value="03">March</option> 
        <option value="04">April</option> 
        <option value="05">May</option> 
        <option value="06">June</option> 
        <option value="07">July</option> 
        <option value="08">August</option> 
        <option value="09">September</option> 
        <option value="10">October</option> 
        <option value="11">November</option> 
        <option value="12">December</option> 
       </select> 
      </form> 
     </td> 
    </tr> 
</table> 

この画像を生成します。enter image description here

は、どのように私は実際には「ブラウズ:」と整列する月のセレクターボックスを得ることができますか?

編集:これはIEでは動作するが、Chromeではずれていることに注意してください。

+0

あなたはボックスにIDを与えると、それに位置を割り当てることができ、あなたのCSSのいずれかのコードを追加します。相対ボックスを押し下げるにはxピクセルの値を使用しますか? – A1raa

答えて

1


form{ 
    margin-bottom: 0em; 
} 

または

form{ 
    margin-bottom: 0em !important; 
} 
+0

これはクロムの問題を修正しますが、IEのページを破損します – doominabox1

+0

try margin:bottom:0em; – mkawa

+1

が解決策を変更しました。それを試してください。 – mkawa

2

コードに影響を与える他のCSSスタイルがいくつかありますが、以下で問題なく動作するようです。

FirefoxとChromeの両方で最新版を確認しました。

td { 
 
    border: 1px dotted gray; 
 
    height: 100px; /* for demo only */ 
 
} 
 
form { 
 
    border: 1px dashed blue; 
 
}
<table> 
 
    <tr> 
 
    <td nowrap>Employee Birthdays for October</td> 
 
    <td width="100%"></td> 
 
    <td>Browse:</td> 
 
    <td valign="middle"> 
 
     <form method="get"> 
 
     <select type="submit" name="mo" onchange="this.form.submit()"> 
 
      <option value="01">January</option> 
 
      <option value="02">February</option> 
 
      <option value="03">March</option> 
 
      <option value="04">April</option> 
 
      <option value="05">May</option> 
 
      <option value="06">June</option> 
 
      <option value="07">July</option> 
 
      <option value="08">August</option> 
 
      <option value="09">September</option> 
 
      <option value="10">October</option> 
 
      <option value="11">November</option> 
 
      <option value="12">December</option> 
 
     </select> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
</table>

+0

マークが正しいです。開発者用ツール(ブラウザではf12)を開き、問題の要素にどのようなCSSスタイルが影響しているかを調べることをお勧めします。 – A1raa

+0

私が持っている唯一のスタイルは、親やその他のものではない別のテーブルです。 – doominabox1

+0

http://imgur.com/h2u3OUe問題だと思われますが、ユーザースタイルシートは何ですか? – doominabox1

関連する問題