Question

我正在尝试在右侧获得列表，在左侧获得hi（徽标），使其处于同一级别，并在带有白色背景的黑色1px实心边框内。

我尝试将div放在整个标题和称为#top的导航中，但是只有标题部分会接收css div id=top指令。

请指出您发现我做错了的其他事情。就像我在处理ID，班级和Divs一样吗？

**html**

    <body id="body">
<!-----------------------------------HEADER------------------------------------------->     
        <div id="top">

            <header id="header">
                <h1>Icon Share</h1>
            </header>

            <div class="clear"></div>
        <!-----------------------------------NAV---------------------------------------------->
                <nav id="nav-top" class="nav">

                <div class="clear"></div>

                    <div id="top-link">
                    <div class="clear"></div>
                            <div id="id-select">
                                <select>
                                    <option value="english">English</option>
                                    <option value="chinese">Chinese</option>
                                    <option value="spanish">Spanish</option>
                                    <option value="portugese">Portugese</option>
                                </select>
                            </div>

                            <div class="div-list">
                                <ul class="list" id="list1">
                                    <li><a href="register.html">Register</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="projects.html">Projects</a></li>
                                    <li><a href="about.html">About</a></li>
                                </ul>
                            </div>
                    </div>

                </nav>

        </div>


<!----------------------------------MAIN---------------------------------------------->
            <div class="clear"></div>

下面是我的CSS代码。

**css**

    * {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.clear {
    clear: both;
}

body {
    background-color: #37acc5;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

#top {
    border: 1px solid #262626;
    background-color: #ffffff;
}

header {
    float: left;
}

a {
    text-decoration: none;
    color: #262626;
}

li {
    list-style-type: none;

}

header h1 {
    color: #262626;

}

#nav-top {
    float: right;
}

#list1 li{
    float: right;
}

#footer1 {
    float: left;
}

#footer2 {
    float: right;
}

Answer 1

这里有一些不必要的<div class="clear"></div>代码。使用clear: both;时，Clear清除两侧的所有内容，将其删除并仅在#top结束标记之前放置一个，并且需要一些额外的CSS。

我在下面提供了一个示例（尽管如果您想稍微更改html，也可以使用flex项目）：

/* -- NEW CSS -- */

#nav-top
{
   min-height: 40px;
}

#top-link > div
{
   display: inline-block;
   vertical-align: middle;
   line-height: 40px;
}

#top
{
    border: 1px solid #262626;
    padding: 0 15px;
    background-color: #ffffff;
    line-height: 40px;
}

.nav .div-list .list > li
{
  padding-left: 15px;
}

/* -- END -- */

* {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.clear {
    clear: both;
}

body {
    background-color: #37acc5;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    float: left;
}

a {
    text-decoration: none;
    color: #262626;
}

li {
    list-style-type: none;

}

header h1 {
    color: #262626;

}

#nav-top {
    float: right;
}

#list1 li{
    float: right;
}

#footer1 {
    float: left;
}

#footer2 {
    float: right;
}

<div id="top">

   <header id="header">
      <h1>Icon Share</h1>
   </header>

   <!-----------------------------------NAV---------------------------------------------->
   <nav id="nav-top" class="nav">

      <div id="top-link">
         <div id="id-select">
            <select>
               <option value="english">English</option>
               <option value="chinese">Chinese</option>
               <option value="spanish">Spanish</option>
               <option value="portugese">Portugese</option>
            </select>
         </div>

         <div class="div-list">
            <ul class="list" id="list1">
               <li><a href="register.html">Register</a></li>
               <li><a href="login.html">Login</a></li>
               <li><a href="projects.html">Projects</a></li>
               <li><a href="about.html">About</a></li>
            </ul>
         </div>
      </div>

   </nav>

   <div class="clear"></div>
   
</div>

如何更正div，float和border对齐的问题

1 个答案: