Question

关于我们测试网站上的div，我有一个问题，只有在iPad上观看时（或者，我猜测，这是一个平板电脑大小的屏幕）......

http://jmldirect.uat.venda.com

加入我们（社交图标）//通讯栏从主包装中流出，我不明白为什么。

这是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;
}

Answer 1

您已在父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%;
}

^并给予右侧更多宽度以便为您的输入腾出空间。

Answer 2

<强>解答：

<强> 1。标记

<div class=“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>
    <li><a class="foot-pin" href="http://www.pinterest.com/JMLdirect" target="_blank" alt="JMl on Pinterest"></a></li>
</ul>

<ul class="cards">
    <li><a class="mastercard"></a></li>
    <li><a class="visa"></a></li>
    <li><a class="maestro"></a></li>
    <li><a class="visaElectron"></a></li>
    <li><a class="Paypal"></a></li>
</ul>
</div>

<强> 2。 CSS：

.socialfooter {
height:55px;
width:100%;
background:url("../images/social_icons/social_footer_wrapper_1010.png") repeat-y 50% 0 transparent;
clear:both;
position:relative;
}

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

.getSocial li {
position:relative;
float:left;
}

.socialfooter ul.cards {
display: inline-block;
float: right;
list-style-type: none;
margin: 1.35em 0 0 13em;
position: absolute;
width: 30%;
}

.socialfooter li {
display: inline-block;
list-style-type: none;
background:none;
}

.cards li {
float:left;
padding:0 7px;
}

.cards li a {
background: url("../images/social_icons/elements.png") no-repeat transparent;
}

.cards li a.mastercard {
    background-position: -15px -385px;
    display: block;
    height: 24px;
    margin-left: 5px;
    width: 38px;
}

.cards li a.visa {
    background-position: -58px -386px;
    display: block;
    height: 24px;
    margin-left: 5px;
    width: 38px;
}

.cards li a.maestro {
    background-position: -102px -385px;
    display: block;
    height: 24px;
    margin-left: 5px;
    width: 38px;
}

.cards li a.visaElectron {
    background-position: -145px -385px;
    display: block;
    height: 24px;
    margin-left: 5px;
    width: 38px;
}

.cards li a.Paypal {
    background-position: -189px -385px;
    display: block;
    height: 24px;
    margin-left: 5px;
    width: 38px;
}

iPad特定的CSS Div问题

2 个答案: