Question

当应用不同的屏幕尺寸时，如何将图标保持在JQM页脚的中心？我已经在iPhone 6 plus上测试了应用程序并且它们很好但是当屏幕尺寸减小时，图标不会调整到新的屏幕尺寸。我已经尝试了text-align：center，也调整了边距，但这并没有给我我想要的结果。它可能是如此简单，任何帮助都是值得赞赏的。

我的HTML

<div data-role="footer" id="socials" data-position="fixed">
  <ul>
     <li><a href="https://en.wikipedia.org/wiki/Asia"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
     <li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
     <li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
     <li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
     <li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
    </ul> 
  </div>
</div>

我的css

#Asia div ul #socials {
    list-style-type: none;
}

#Asia div ul li {
    float: left;
    margin: 4px;    
}

Answer 1

您可以使用jQM导航栏：

BEGIN {
VALUES       = ""    
L_EXIST = "NO"           
R_EXIST = "NO"           

}

/!/       { VALUES = gsub(" ", "", $0);
            getline;

            if ($1 == ">") L_EXIST = "YES";
            else if ($1 == "<") R_EXIST = "YES";

            print VALUES"#"L_EXIST"#"R_EXIST

           }

END {

}

<强> DEMO

在JQM页脚中屏幕更改时，使图标居中

1 个答案: