html - 基本的 CSS 对齐问题

Question

我正在使用 ul、li 元素编写用于导航的 html 代码，

我的 html 是。

<div id="header">
      <div id="topmenu">
               <div id="logo">
                     <img src="img/logo-left.png" alt="BhatkalNews" />
                </div>

                <div id="navigation">
                    <ul>
                        <li>Contact</li>
                        <li>Photo</li>
                        <li>Video</li>
                    </ul>
                 </div>
       </div>
</div>

我已经使用了reset.css，这里是css代码。

/* top-menu */
div#topmenu {
    width:940px;
    margin:0 auto!important;
}
div#logo {
    width:289px;
    padding: 30px 0 0 0;
}

/*navigation */

div#navigation {
    width:446px;
    float:left; 
}

导航 div 将 ul、li 放在 Logo 下方，而我希望它在 Logo 之后从左侧对齐。我错过了什么？

Answer 1

您的 #logo 元素应包含 float: left;。我不确定 #navigation 是否应该有 float 风格，但如果你想保留它，你应该在之后添加另一个 div 元素#navigation 样式 clear:both:

<div id="navigation">
    <ul>
        <li>Contact</li>
        <li>Photo</li>
        <li>Video</li>
    </ul>
</div>
<div style="clear:both; width: 1px;" />

这应该可以解决问题:)

问候