0

私は今、レスポンシブ コードに取り組んでいますが、何らかの理由で、モバイル ビューの幅が 100% の div の中央に 2 つのリストを表示することができません。これが中央に表示されない原因となっている可能性のある、以下の 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 を 2 つの div でラップすることでした。center-social は全幅にまたがり、center-s は幅のアイデアを提供して、UL を中央に配置できるようにします。実際のページで試してみると、正しく表示されるはずです。この例では、ソーシャル 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 に答える