0

我现在正在处理响应式代码，由于某种原因，我无法在 div 的中心显示 2 个列表，移动视图的宽度为 100%。下面的css代码中是否有一些我遗漏的东西可能导致它不能居中显示？

两个列表都有 .social-media 和 .top-nav 类

***HTML** * ** *

 <div id="gezzamondo">

 <div class="header">

 <img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo"  />

 <ul class="top-nav">
 <li><a href="#">About</a></li>
 <li><a href="#">Work</a></li>
 <li><a href="#">Contact</a></li>
 </ul>

 <ul class="social-media">
 <li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
 <li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
 <li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
 </ul>


 </div><!-- close header -->
 </div><!-- close gezzamondo -->

**CSS****

 body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
 }

 img{
max-width:100%:
 }

 #gezzamondo{
width:100%;
margin:0 auto;
 }

 .header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
 }

 #gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
 }

 #gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;

 }

 #gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
 }

 #gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
 }

 #gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
 }

 #gezzamondo .social-media li img{
height:44px;
width:44px;
 }

 #gezzamondo .social-media li{
float:left;
margin-right:15px;
 }

 #gezzamondo .social-media li.last{
float:left;
margin-right:0px;
 }

 #gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
 }
4

2 回答 2

1

您在#gezzamondo .social-media 中将位置设置为绝对，只需删除该位置，它应该居中。

于 2012-11-29T00:40:36.920 回答
0

我使用了您提供的代码，在 jsfiddle 中看起来很乱（示例代码不完整等）。我认为这应该为你做，或者至少让你更接近。我所做的基本上是将社交 ul 包装在两个 div 中。center-social 跨越整个宽度，而 center-s 尝试提供宽度的概念，以便 uls 可以居中。在您的实际页面上尝试一下，它应该可以正确显示。示例中仅应用于社交 ul。

<div id="center-social">
   <div id="center-s"> 
 <ul class="social-media">
 <li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
 <li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
 <li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
 </ul>
     </div>
    </div>
于 2012-11-29T00:36:33.147 回答