HTML/CSS 部分无法正常工作

标签 html css

我有一个简单的 HTML/CSS 媒体网站。它分为页眉、2 个部分和页脚。现在看起来没问题，但为了让我调整第二部分的上边距，我至少需要 155px 才能移动。基本上一切都在 155px 附近太高了？是什么原因造成的？即使是我的页脚也需要至少 155px 上边距才能移动。任何人都可以看到任何东西吗？我确定我犯了一个非常愚蠢的错误。

这是一个JSFiddle关于我的问题，我还在下面发布了代码。

@charset "UTF-8";
body {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	max-width: 960px;
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	position: absolute;
}
header {
	height: 95px;
	border-left: thin solid #000000;
	border-right: thin solid #000000;
	border-bottom: 4px solid #867E7E;
	border-top: thin solid #000000;
	background-color: #000000;
	width: 100%;
	opacity: 0.8;
	display: block;
	margin-bottom: 35px;
}
.top-nav {
	float: right;
	margin-right: 10%;
	margin-top: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	display: inline;
	padding-right: 2px;
}
.top-nav ul li {
	display: inline;
	margin-left: 20px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	float: left;
	text-decoration: none;
}
.top-nav ul li a {
	color: #FFFFFF;
	text-decoration: none;
	display: inline;
}
.top-nav li a:link        , top-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: inline;
	text-decoration: none;
}
.top-nav li a:hover      , top-nav li a:active      ,top-nav li a:focus {
	color: #867E7E;
	display: inline;
}
.top-nav a.selected {
	color: #867E7E;
}
.social-media-top {
	display: inline;
	float: right;
	margin-right: 41px;
	margin-top: 51px;
}

.social-icon {
	width: 20px;
	height: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 5px;
	margin-left: 5px;
}

#music-content {
	list-style-type: none;
	display: block;
}
#music-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
}
#music-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#music-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#music-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.music-info {
	display: block;
	float: left;
	margin-left: 15px;
}
#movie-content {
	list-style-type: none;
	display: block;
}
#movie-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
	clear: both;
}
#movie-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#movie-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#movie-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.movie-info {
	display: block;
	float: left;
	margin-left: 15px;
}

img {
	max-width: 100%;
}



footer {
	height: 55px;
	background-color: #E8EBEF;
	color: #000000;
	clear: both;
	text-align: center;
	border-top: 1px solid #C0C0C0;
	float: none;
}
.bottom-nav {
	float: left;
	padding-left: 0px;
	padding-right: 0px;
	clear: both;
	display: inline-block;
	margin-top: 20px;
}
.bottom-nav ul li {
	display: inline;
	float: left;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 0px;
}
.bottom-nav ul li a {
	color: #000000;
	text-decoration: none;
}
.bottom-nav li a:link         , bottom-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: block;
	text-decoration: none;
}
.bottom-nav li a:hover       , bottom-nav li a:active       ,bottom-nav li a:focus {
	color: #867E7E;
}
.bottom-nav a.selected {
	color: #867E7E;
}

.copyright {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
}
footer p {
	text-align: center;
}
.social-media-bottom {
	float: right;
	display: inline;
	margin-top: 20px;
	margin-right: 41px;
}
#media-content {
	width: 100%;
	display: inline-block;
}
<!doctype html>


<title>Media Page - </title>

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">


<body>
<div id="wrapper">
  <header>
       
    <div class="social-media-top">
  	 	<a href="http://twitter.com"><img src="images/twitter_gray_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_white_1024.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="mailto:tkmets5@yahoo.com">
        	<img src="images/mail.ico" alt="mail" class="social-icon">
        </a>
    </div>	
    <nav class="top-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
           <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
   
  </header>
  
  

  <section id="music-content">
  		<h2> Music Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
  
  <section id="movie-content">
  		<h2> Movie Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
 
 
  
  <footer>
  	<nav class="bottom-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
  	<div class="social-media-bottom">
  	 	<a href="http://twitter.com"><img src="images/twitter_blue_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_blue_1024.png" alt="Facebook Logo" class="social-icon"></a>
    </div>	 
  	<div class="copyright">
   	  <p>&copy; 2015</p>
    </div>
  	
  </footer>
</div>
</body>

最佳答案

您需要清除 li 的 float 的。我已经通过向您的 section 添加 clearfix 样式来更新您的 Fiddle的。

Fiddle

样式更新是:

#music-content:after {
  content: "";
  display: table;
  clear: both;
}

和

#movie-content:after {
  content: "";
  display: table;
  clear: both;
}

当你 float 和元素时，你将它从文档的“流”中取出。这意味着它的父容器(你的 section 的)没有接收到你 float 的 li 的高度。的(恰好在 155px 左右)。他们只是从 <h2> 获得高度标题。

关于HTML/CSS 部分无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29113150/

上一篇：css - Bootstrap DatePicker 样式无法正常工作

下一篇：css - .css 到 .scss 最终变成 .scss.css

相关文章：

php - 使用 javascript/ajax 提交具有不同输入类型的 php 表单

html - 侧边栏高度不随内容高度一起变化

javascript - 根据选定的复选框显示/隐藏表单的部分？

html - 垂直对齐 :middle for a span element

javascript - 单击时将事件/选定状态添加到链接

html - div 在左边 float 一个部分，在右边列出(但这必须在最右边)并且在 HTML 中没有反转？

html - CSS 定位

javascript - 像素在 Canvas 上的尺寸不正确

html - 具有额外头部的 css 表格

javascript - 滑动拼图(网页游戏)- 过渡

©2024 IT工具网  联系我们