aspx页面中的Div问题（html和css）

我正在尝试用css设计页面样式。我用div构建页面，并通过一个外部css文档对其进行样式化。这就是我到目前为止所做的：

显然这不是我想要的！由于某些原因，菜单（通过ul构建）没有保留在菜单分区中。此外，我的页脚也遇到了相同的问题。我做错了什么

以下是我的aspx页面+css文档： ASPX：

提前谢谢！

---

Kevin

由于浮动所有

li

元素，因此必须清除浮动以防止父元素崩溃。我相信您可以通过清除

ul

元素上的浮动来解决问题

#menu ul{
    clear: both;
    list-style-type: none;
}

---

由于浮动所有

li

元素，因此必须清除浮动以防止父元素崩溃。我相信您可以通过清除

ul

元素上的浮动来解决问题

#menu ul{
    clear: both;
    list-style-type: none;
}

---

从

#页脚左

和

#菜单li中删除
浮动：左

将
display:inline block
添加到
#菜单li
以使其水平对齐

#menu li{
   display:inline-block
}

从
#左页脚
和
#菜单li中删除
浮动：左

将
display:inline block
添加到
#菜单li
以使其水平对齐

#menu li{
   display:inline-block
}

试试这个
*{
边际：0px；
填充：0px；
}
ul li{列表样式类型：无；}
身体{
背景颜色：浅灰色；
}
#内容{
左边距：45像素；
右边距：45像素；
左边框：实心1px黑色；
右边框：实心1px黑色；
}
#页脚{
背景色：#E8E8D9；
字体大小：12px；
垫底：5px；
垫面：5px；
边框：实心1px黑色；
/*边框顶部：纯色1px黑色*/
溢出：隐藏；
}
#左脚{
浮动：左；
左侧填充：10px；
}
#右脚{
浮动：对；
右边填充：10px；
}
#身体{
左侧填充：20px；
右边填充：20px；
垫底：10px；
填充顶部：10px；
背景色：白色；
}
#标志{
/*背景色：#E8E8D9*/
背景色：红色；
溢出：隐藏；
}
#程序名p{
浮动：左；
左侧填充：20px；
垫底：10px；
填充顶部：10px；
字体大小：20px；
}
#记录{
浮动：对；
字体大小：12px；
右边填充：10px；
垫底：10px；
填充顶部：10px；
}
#菜单{
明确：两者皆有；
边框顶部：纯色1px黑色；
边框底部：实心1px黑色；
左侧填充：10px；
垫面：3件；
垫底：3件；
溢出：隐藏；
}
#菜单ul{
列表样式类型：无；
}
#菜单里{
浮动：左；
}
#菜单李a{
显示：块；
左侧填充：15px；
右侧填充：15px；
文字装饰：无；
字体系列：佐治亚州，“时代新罗马”，衬线；
字体大小：16px；
}
试试这个
*{
边际：0px；
填充：0px；
}
ul li{列表样式类型：无；}
身体{
背景颜色：浅灰色；
}
#内容{
左边距：45像素；
右边距：45像素；
左边框：实心1px黑色；
右边框：实心1px黑色；
}
#页脚{
背景色：#E8E8D9；
字体大小：12px；
垫底：5px；
垫面：5px；
边框：实心1px黑色；
/*边框顶部：纯色1px黑色*/
溢出：隐藏；
}
#左脚{
浮动：左；
左侧填充：10px；
}
#右脚{
浮动：对；
右边填充：10px；
}
#身体{
左侧填充：20px；
右边填充：20px；
垫底：10px；
填充顶部：10px；
背景色：白色；
}
#标志{
/*背景色：#E8E8D9*/
背景色：红色；
溢出：隐藏；
}
#程序名p{
浮动：左；
左侧填充：20px；
垫底：10px；
填充顶部：10px；
字体大小：20px；
}
#记录{
浮动：对；
字体大小：12px；
右边填充：10px；
垫底：10px；
填充顶部：10px；
}
#菜单{
明确：两者皆有；
边框顶部：纯色1px黑色；
边框底部：实心1px黑色；
左侧填充：10px；
垫面：3件；
垫底：3件；
溢出：隐藏；
}
#菜单ul{
列表样式类型：无；
}
#菜单里{
浮动：左；
}
#菜单李a{
显示：块；
左侧填充：15px；
右侧填充：15px；
文字装饰：无；
字体系列：佐治亚州，“时代新罗马”，衬线；
字体大小：16px；
}
浮动元素从页面流中移除，这意味着简单来说，在清除浮动元素之前，浮动元素中的任何内容都不会使其展开。我会在你菜单上最后一个菜后加一个ul@DavidB将
放在
中不是一个好主意，它不是有效的HTML
只能包含作为直接子元素的
元素。@Christofer Eliasson-没错，我关于浮动的解释仍然有效，但我的演示是不正确的。很抱歉，浮动元素从页面流中移除，这意味着在清除浮动之前，它们内部的任何内容都不会使它们展开。我会在你菜单上最后一个菜后加一个ul@DavidB将
放在
中不是一个好主意，它不是有效的HTML
只能包含作为直接子元素的
元素。@Christofer Eliasson-没错，我关于浮动的解释仍然有效，但我的演示是不正确的。抱歉搞砸了，这真是个奇迹！这真是妙极了！谢谢
try this
<style>
*{
  margin: 0px;
  padding: 0px;
 }

ul li {list-style-type:none;}

body {
     background-color: lightgray;
     }

#content{
        margin-left: 45px;
        margin-right: 45px;
        border-left: solid 1px black;
        border-right: solid 1px black;
        }

#footer{
       background-color: #E8E8D9;
      font-size: 12px;
      padding-bottom: 5px;
      padding-top: 5px;
     border: solid 1px black;
   /*border-top: solid 1px black;*/
overflow:hidden;
    }

#footer-left{
         float: left;
         padding-left: 10px;
         }

 #footer-right{
         float: right;
        padding-right: 10px;
             }
#body{
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-top: 10px;
     background-color: white;
     }

#logo{
    /*background-color: #E8E8D9;*/
    background-color: red;
overflow:hidden;
    }

#programName p{
         float: left;
        padding-left: 20px;
       padding-bottom: 10px;
       padding-top: 10px;
      font-size: 20px;
       }

#logged{
     float: right;
    font-size: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    }

#menu{
   clear:both;
   border-top: solid 1px black;
   border-bottom: solid 1px black;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
overflow:hidden;
   }

#menu ul{
      list-style-type: none;
       }

#menu li{
   float: left;
        }

#menu li a{
      display: block;
     padding-left: 15px;
    padding-right: 15px;
   text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif;
   font-size: 16px;
  }
</style>