Div problems (html and css) in a aspx page

This question already has an answer here:

How do you keep parents of floated elements from collapsing? [duplicate] 16 answers

---

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>

---

Since you float all the li elements, you will have to clear the floating to prevent the parent from collapsing. I believe you will solve the problem by clearing the float on the ul element.

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

---

Remove float:left from #footer-left and #menu li

Add disply:inline-block to #menu li to get it aligned horizontally.

#menu li{
   display:inline-block
}

DEMO

链接地址: http://www.djcxy.com/p/88436.html

上一篇: 为什么我在标题背景上添加的颜色不可见？

下一篇: 在aspx页面中Div问题（html和css）