个人中心
gpt4 book ai didi

HTML/CSS 部分无法正常工作

转载 作者：太空宇宙 更新时间：2023-11-04 12:10:09 25 4
gpt4 key购买 nike

我有一个简单的 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/

25 4 0
文章推荐： c++ - 为较旧的 glibc 构建
文章推荐： c++ - 您可以使用 googlemock 对不属于某个类的函数设置期望吗？
文章推荐： c++ - 首次插入静态 STL 集会导致未处理的异常 0xC0000005 : Access violation to be thrown
文章推荐： linux - 编译共享库时 libcrypto 抛出错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com