aspx页面中的Div问题（html和css）[重复]
Posted
技术标签:
【中文标题】aspx页面中的Div问题（html和css）[重复]【英文标题】：Div problems (html and css) in a aspx page [duplicate] 【发布时间】：2013-01-08 03:55:30 【问题描述】：我正在尝试使用 css 设置页面样式。我用 div 构建我的页面，并通过外部 css 文档设置它们的样式。这是我到目前为止所拥有的：
显然这不是我想要的！出于某种原因，菜单（通过 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;
提前致谢！ 凯文
【问题讨论】：
浮动元素是从页面的流中取出的，简单来说就是里面的任何内容都不会让它们展开，直到浮动被清除。我会在你的菜单的最后一个 li 之后添加一个 ul @DavidB 在<ul> 中放置<div> 不是一个好主意，它不是有效的HTML。 <ul> 只能包含 <li> 元素作为直接子元素。
@Christofer Eliasson - 你说得对，我对浮动的解释仍然有效，但我的演示不正确。很抱歉造成混乱
【参考方案1】：
由于您浮动所有li 元素，因此您必须清除浮动以防止父级崩溃。我相信你会通过清除ul元素上的浮动来解决问题。
#menu ul
clear: both;
list-style-type: none;
【讨论】：
【参考方案2】：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>
【讨论】：
这就像一个魅力！谢谢【参考方案3】：从#footer-left 和#menu li 中删除float:left
将disply:inline-block 添加到#menu li 使其水平对齐。
#menu li
display:inline-block
DEMO
【讨论】：
以上是关于aspx页面中的Div问题（html和css）[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Paypal 购买按钮添加到 aspx 页面中的项目？