0

我正在尝试创建一个标题，其中我在屏幕左上角有徽标。在徽标的右侧并与其底部对齐，我想放置一个顶部菜单。我没有使用任何 CSS 框架，所有的 HTML 和 CSS 代码都位于此处。

我无法让菜单与徽标底部（具有float: left;）对齐。此外，在成功测试所有元素 ( ) 上的边框的边距设置后border: 1px solid;，在我删除边框的那一刻，一切都重新洗牌，我必须添加padding: 1px;以将它们保持在适当的位置。

有人可以看看并告诉我相关CSS的正确应用吗？

编辑：
请注意，代码确实有效。我的问题是它是一种 hack（本质上是添加不存在的填充来完成工作）。

4

1 回答 1

1

我建议您做的是绝对定位徽标和导航容器，然后设置每个元素的位置和大小以适应。这个 IMHAO 比浮动标题元素更健壮和可靠。

即在CSS中：

header {
    width: 100%; height: xpx;
    postion:relative; /* This makes elements inside that have position:absolute act relative to the container, useful if you need to move it around */
    top:0; left:0;
}

#logo {
    background: blah; width:xpx; height:xpx;
    position: absolute;
    top:0px; left:0px; 
}

nav.top_nav {
    width:xpx; height:xpx;
    position: absolute;
    top:0px; left:[header width + some padding]px;
}

当然，如果需要，您可以将零用于填充。

于 2012-04-25T00:29:56.527 回答