0

レイアウトを div に分割しました。div="content" 領域内に、配置する必要があるテーブルとフィルター オプションがあります。フィルター オプション エリアとナビゲーション バーの間にマージンを挿入しようとしています。これは Chrome では問題ないように見えますが、Mozilla Firefox では、フィルタ オプションが必要以上に下に表示されます。

これは私のコードであり、現時点でどのように見えるかです:

http://jsfiddle.net/elmiri/5mXJ7/このリンクを Chrome で開いた場合、フィルタ オプションは問題ないように見えますが、Mozilla では非常に悪く見えます。これが私のコードのすべてです：

<div id="header">
<h1>LOGO</h1>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Test</a>
    <li><a href="">Test</a>
    <li><a href="">Test</a> 
    <li><a href="">Activity Feed</a> 
    <li><a href="">Stats</a> 
    <li><a href="">Contact Us</a> 
    <li><a href="http://localhost/playtime/itms/Users/users.php">Users</a> 
    <li><a href="">My account</a> 
    </ul>

</div>
</body>
</html>
<div id="personalised">
<p>Hello, </p>
</div>
<div id="content">
<form id="form1" method="get" action="">
<div id= "filter">
  <label for="column">Select client type:</label>
  <select name="column" id="column">
    <option selected>Key</option>
    <option >Norm</option>
    <option >Onb</option>
  </select>
  <input type="submit" name="change" id="change" value="Filter">
  <input type="submit" name="Remove" id="Remove" value="Show all">
  </div>
<table>
  <tr>
    <th scope="col">Client name</th>
    <th scope="col">Client type</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
    <tr>
    <td>Client2</td>
    <td>KEY</td>
    <td><a href="#" onclick="newWindow('update_clients.php?client_id=3', 800, 800)">EDIT</a></td>
    <td><a href="delete_clients.php?client_id=3">DELETE</a></td>
  </tr>
    <tr>
    <td>Client3</td>
    <td>KEY</td>
    <td><a href="#" onclick="newWindow('update_clients.php?client_id=5', 800, 800)">EDIT</a></td>
    <td><a href="delete_clients.php?client_id=5">DELETE</a></td>
  </tr>
    <tr>
    <td>client4</td>
    <td>NORM</td>
    <td><a href="#" onclick="newWindow('update_clients.php?client_id=7', 800, 800)">EDIT</a></td>
    <td><a href="delete_clients.php?client_id=7">DELETE</a></td>
  </tr>
    <tr>
    <td>client4</td>
    <td>ONB</td>
    <td><a href="#" onclick="newWindow('update_clients.php?client_id=8', 800, 800)">EDIT</a></td>
    <td><a href="delete_clients.php?client_id=8">DELETE</a></td>
  </tr>
    <tr>
    <td>client100</td>
    <td>Key</td>
    <td><a href="#" onclick="newWindow('update_clients.php?client_id=13', 800, 800)">EDIT</a></td>
    <td><a href="delete_clients.php?client_id=13">DELETE</a></td>
  </tr>
  </table>
</div>

これは、フィルター オプションを配置するコードの一部です。

<div id= "filter">
  <label for="column">Select client type:</label>
  <select name="column" id="column">
    <option <?php if ($col == 'Key') echo 'selected'; ?>>Key</option>
    <option <?php if ($col == 'Norm') echo 'selected'; ?>>Norm</option>
    <option <?php if ($col == 'Onb') echo 'selected'; ?>>Onb</option>
  </select>
  <input type="submit" name="change" id="change" value="Filter">
  <input type="submit" name="Remove" id="Remove" value="Show all">
  </div>

CSS コード:

#filter {
float:right;
margin-top: 2%;
}

このフィルター div は Content div 内にあるため、それが問題を引き起こしているかどうかはわかりません。margin-top を 20 px に設定しようとしましたが、それでも Firefox では機能しませんでした。Chrome と Mozilla の両方で見栄えがよくなるように、ナビゲーション バーとフィルター オプションの間にギャップを設けるのを誰かが手伝ってくれたらありがたいです。ありがとうございました

4

1 に答える 1

2

これmargin-topは、パーセンテージで設定されている場合、通常期待される高さではなく、要素の親の幅に比例するためです。MDN のマージン。

于 2013-04-21T10:56:55.383 に答える