如何使此页面上的内容文本http://morriswebsitedesign.com/about.html与导航链接对齐？我曾经使用绝对属性或表格，但现在我试图弄清楚如何使用float。
我希望它看起来像这样：BBB
其中 A 是导航，B 是内容。
问问题
345 次
3 回答
2
首先从#content 中删除float:left，这将使您的#content 位于菜单的右侧。
其次，如果您不希望部分文本位于菜单下，请将其设置为溢出：隐藏。
#menu{float:left}
#content{overflow:hidden}
这样你就不需要给你的内容任何宽度。
为了在它们之间留出一些空间，您可以在菜单中设置margin-right 和margin-bottom。
#menu{margin-right:20px; margin-bottom:20px}
我看到在你的css中你的'p'有margin-top。这使得您的内容顶部不会与您的菜单对齐。您可以使用 css3 删除第一个元素的边距。
#content p:nth-child(1){margin-top:0}
编辑： 要将#content 与徽标对齐：
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
首先，您需要您的徽标和菜单充当一列，以使两者必须具有相同的宽度，并浮动到左侧。清晰的左侧将使您的菜单在徽标下移动。
然后选择你的#content remove any float:left 并给它一个 display:inline，这样它就不会再充当一个块了。
菜单的底部边距是为了让您的文本不会在您的菜单下移动，但您可以尝试给您的菜单更大的高度。
于 2012-07-26T02:16:48.943 回答
2
在 CSS 中使用浮动时，您添加浮动的项目也应该有一个宽度。
但是在漂浮时，您需要了解如何清除这些漂浮物。这是一个很好的阅读：
http://css-tricks.com/the-how-and-why-of-clearing-floats/
如果您也想要内容旁边的徽标，请将菜单和徽标包装在 div 中，然后浮动该元素
于 2012-07-26T02:20:42.193 回答
2
您的文本和导航链接太宽，无法容纳它们的包含div。如果您希望它们对齐，则必须增加包含的大小div，或减小文本和/或导航链接的大小。
例如，当我使用以下样式时，它们在我的计算机上完美排列：
#content { width:700px; }
您必须将微型徽标和导航链接包装在div样式float:left;中。然后，您可以float:left从微型徽标和ul.
于 2012-07-26T02:11:24.840 回答