155px

155px

关注
发信
关注(28)粉丝(399)

html - 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:[email protected]">
        	<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的浮点数。我通过在section上添加clearfix样式来更新了Fiddle。

Fiddle

样式更新为：

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


和

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


当浮动和元素时，将其从文档的“流”中取出。这意味着它的父容器（您的section）没有收到您浮动的li的高度（恰好在155px左右）。他们只是从<h2>标头获得高度。

09-28 05:58
Powered by LMLPHP ©2024 155px 0.024498