编辑:目标浏览器为IE10以上；无需与其他浏览器兼容。
在页面的 header 中，我有 3 个元素(这也是顺序):
- 应用程序 Logo
- 申请标题
- 基于 CSS 的菜单栏
Here is a JSFiddle对于那些等不及的人 ;)
header 本身是 60px 高，元素应该垂直居中并且“ float ”在左边。我无法在它们上使用 float: left 让它工作，因为我不是很擅长纯 CSS 布局，所以我实用地插入了一个 table 来实现它工作。
除了一个烦人的 1px 大问题外，它的工作原理是:li 项(即可点击的菜单栏项)有一个 1px从页面顶部偏移，因此在 header 内没有完美对齐，而是延伸到 #content。所以我的问题是:
- 我如何解决这个偏移量及其原因是什么？我认为这可能是
table的边界问题，但看起来并非如此.可能是因为line-height？ - 不是很重要，但对我来说很有趣:如果不使用
table，我怎么能实现我想要的布局，因为我经常读到它是一种非常糟糕的风格？<
这是我使用的 HTML:
<body>
<header>
<table>
<tr>
<td style="vertical-align: middle">
<img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.png" />
</td>
<td>
<label class="title">Title</label>
</td>
<td>
<div class="menu">
<ul>
<li>Home</li>
<li>Test
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</td>
</tr>
</table>
</header>
<div id="content"></div>
<footer>Footer</footer>
</body>
这是 CSS:
/* ------ General layout ------ */
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
}
header {
width: 100%;
height: 60px;
background-color: #eeeeee;
position: fixed;
top: 0;
}
#content {
width: 90%;
margin: 0 auto;
padding-top: 70px;
/* header height + 10 */
padding-bottom: 50px;
/* footer height + 10 */
}
footer {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #eeeeee;
position: fixed;
bottom: 0;
text-align: center;
}
.logo {
resize: both;
height: 30px;
margin-left: 20px;
margin-right: 20px;
}
.title {
font-weight: bold;
color: green;
margin-right: 20px;
}
/* ------ CSS-based menu bar attempt ------ */
table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
table td:last-child {
width: 100%;
}
.menu ul {
line-height: 60px;
text-align: left;
margin: 0;
padding: 0;
list-style: none;
}
.menu ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0 20px;
cursor: pointer;
transition: all 0.2s;
}
.menu ul li:hover {
background: #555;
color: #fff;
}
.menu ul li ul {
padding: 0;
position: absolute;
top: 100%;
left: 0;
width: 160%;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.menu ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.menu ul li ul li:hover {
background: #666;
}
.menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
最佳答案
如果您检查您的页面(使用 Firebug、Chrome 开发者工具或类似的东西)，您可以看到 td 里面堆放了您的 li 元素(以及你所有其他的 tds) 都有一个 1px 的填充，这是困扰你的像素的来源。恐怕我不能真正告诉你这个填充是从哪里来的，因为我在检查器中看不到它的规则，所以我假设它只是表/tds 的默认呈现。您可以添加如下规则来覆盖它:
td {
padding: 0;
}
理想情况下，您还应该在表格上使用 CSS 类，并在 CSS 中使用它以仅针对这些特定的 td，以防您需要将不同的规则应用于页面中的另一个表格。
关于html - 表格内基于 CSS 的菜单栏 : li's are 1px off; problems with the table border?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30297331/