0

我有一个关于我们测试站点上的 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;
}
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; //

^ 这个背景导致了这个问题。这是一个设置为 1010 像素的图像，因此即使 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 回答
0

回答：

1. 标记：

<div class=“socialfooter”&gt;
<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;
}
于 2014-01-07T16:56:11.273 回答