我将我的布局划分为 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> </th>
<th> </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%;
}
THIS filter div 在 Content div 中,所以我不确定这是否会导致问题。我尝试将 margin-top 设置为 20 px,但它在 Firefox 中仍然不起作用。 如果有人帮我在导航栏和过滤器选项之间留出空白,以便它在 Chrome 和 Mozilla 中看起来都不错,我将不胜感激。 谢谢
最佳答案
那是因为 margin-top
如果以百分比设置,它与元素的父级宽度成比例,而不是人们通常期望的高度。 Margin on MDN .
关于html - 此 div 的 margin-top 在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16130337/