0

テスト サイトにある div に関して問題がありますが、iPad (または、おそらくタブレット サイズの画面) で表示した場合のみです...

http://jmldirect.uat.venda.com

Join Us (ソーシャル アイコン) // ニュースレター バーがメイン ラッパーからはみ出してしまい、その理由がわかりません。

HTML と関連する CSS は次のとおりです。

HTML:

<div id="socialfooter">
<ul class="getSocial">
    <li><a class="join-us">JOIN US</a></li>
    <li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>  
    <li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
    <li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
</ul>


<ul class="newsletter">
<li><label for="emailsignup"><a class="join-us">SIGN UP TO OUR NEWSLETTER</a></label></li>
<li><form></form></li>
</ul>
</div>

CSS:

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 1010px;
}

#socialfooter ul.getSocial {
    display: inline;
    float: left;
    list-style-type: none;
    margin: 7px 0 0 46px;
    width: 192px;
}

#socialfooter ul.newsletter {
    display: inline;
    float: right;
    height: 38px;
    list-style-type: none;
    padding: 7px 11px 9px 0;
    width: 564px;
}
4

2 に答える 2

0

親divに幅を設定しました： 

#socialfooter{ width:1010px;}

次に、ニュースレター ul をその div の右側にフロートします。

#socialfooter ul.newsletter{float:right; width:564px;}

これに関する問題は、iPad がそのような広い div (#socialfooter) を表示する解像度を持っていないことです。

コンテンツを表示したい場合は、次のようにパーセンテージ ベースの幅を使用します。

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 100%;
}

#socialfooter ul.getSocial {
    display:inline-block;
    box-sizing: border-box;
    float:left;
    list-style-type:none;
    margin:.5em 0 0 2em;
    width:50%;
}

#socialfoter ul.newsletter {
    display: inline-block;
    box-sizing: border-box;
    float:right;
    vertical-align: middle;
    list-style-type: none;
    padding:0 2em 0 0;
    width:50%;
}

編集：

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent; //

^ この背景が問題を引き起こしています。これは 1010px に設定された画像なので、CSS を使用しても役に立ちません。

    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 100%;
}

#socialfooter ul.getSocial {
    display:inline-block;
    box-sizing: border-box;
    float:left;
    list-style-type:none;
    margin:.5em 0 0 2em;
    width:30%;
}

^ 右側の大きな入力フィールドに合わせて幅を変更

#socialfoter ul.newsletter {
    display: inline-block;
    box-sizing: border-box;
    float:right;
    vertical-align: middle;
    list-style-type: none;
    padding:0 2em 0 0;
    width:70%;
}

^ そして、入力用のスペースを確保するために、この右側の幅を広げました。

于 2013-09-12T14:59:02.760 に答える