Question

我正在尝试用css设置页面样式。我使用div构建我的页面，我通过外部css文档设置样式。这是我到目前为止： enter image description here

显然这不是我想要的！由于某种原因，菜单（通过ul构建）不会保留在菜单div中。此外，我的页脚遇到了同样的问题。我做错了什么？

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

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="AppointmentsDrivingLicense_C_and_D.home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>A.C.T. | Appointments 1.0.0</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="content">
    <!-- BEGIN HEADER -->
    <div>
        <div id="logo">
            <div id="programName">
                <p><b>ACT</b>Appointments 1.0.0</p>
            </div>
            <div id="logged">
                <p>User | <a href="#">Afmelden</a></p>
            </div>
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- END HEADER -->

    <!-- BEGIN BODY -->
    <div id="body">
        <b>Home</b>
        <hr />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, elit eu sollicitudin consectetur, nulla velit congue massa, 
            sit amet hendrerit elit massa vel nisl. Sed consequat aliquam risus ac imperdiet. Etiam placerat metus vitae augue accumsan a pretium lacus varius. 
            In facilisis risus vitae enim varius at lobortis eros fermentum. Nunc sit amet enim id ligula scelerisque tincidunt vitae sit amet nisl. 
            Fusce tellus augue, interdum non semper vitae, semper sed lectus. Nam ultricies massa non erat suscipit a vulputate est bibendum. 
            Nullam cursus ante et ipsum accumsan lacinia. Mauris eget diam sed enim dapibus rutrum ut vel mauris. In faucibus convallis ultrices. 
            Donec pharetra tellus at sem euismod eget consectetur arcu luctus.
        </p>
        <p>
            Morbi scelerisque cursus mi ac suscipit. Curabitur quis nisi ante. In arcu diam, mattis a tristique sit amet, adipiscing sed nulla. 
            Nunc felis massa, ullamcorper eget tristique quis, vestibulum eu tellus. In hac habitasse platea dictumst. Pellentesque nec lacus nibh, 
            a egestas neque. Sed sed mi viverra orci luctus fringilla. Praesent dictum elementum felis, vitae gravida dolor vehicula at. 
            Vestibulum nec molestie tortor. Quisque vel arcu dolor. Nulla facilisi.
        </p>
    </div>
    <!-- END BODY -->

    <!-- BEGIN FOOTER -->
    <div id="footer">
        <div id="footer-left">
            <p>Welkom user</p>
        </div>
        <div id="footer-right">
            <p>ACT-KM © 2013</p>
        </div>
    </div>
    <!-- END FOOTER -->
</div>
</body>
</html>

CSS文件：

    *{
    margin: 0px;
    padding: 0px;
}
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;*/
}
#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;
}
#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;
}
#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;
}

提前致谢！凯文

Answer 1

由于您浮动了所有li元素，因此您必须清除浮动以防止父级折叠。我相信你会通过清除ul元素上的浮点数来解决问题。

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

Answer 2

从float:left和#footer-left

移除#menu li

将disply:inline-block添加到#menu li以使其水平对齐。

#menu li{
   display:inline-block
}

DEMO

Answer 3

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>

在aspx页面中划分问题（html和css）

3 个答案: