Question

我有一个包含链接的页脚，您可以看到results here：

HTML

<footer class="footer_outer">   
        <section class="footer">
            <p>&copy; bla bla bla</p><br>
            <p><span id="solen"><a href="#">xxxx</a></span>  <span id="solen"><a href="#">aaaa</a></span>  <span id="solen"><a href="#">cccccc</a></span>  <span id="solen"><a href="#">bbbbb</a></span>  <span id="solen"><a href="#">yyyy</a></span></p>

        </section><br>
    </footer>

CSS

.footer_outer{width:100%;background-color:#eaeef2}.footer{border-top:1px solid #c7cbce;padding:.6em 0;width:960px;margin:0 auto;text-align:center}.footer p{font-size:.75em;color:#9c9c9c;font-size:14px; text-align:center;}#toTop{position:fixed;bottom:30px;cursor:pointer;right:20px;z-index:9999}#toTop:hover{opacity:.8}#solen{margin:10px; float:left}

此代码有一个小问题，链接未在页面中心对齐，要更正此问题，我只需从div float:left删除命令#solen。

但这就是问题，如果我这样做并调整屏幕大小，链接彼此非常接近，这使得用户很难点击链接，因为打破了用户体验（如果我在谷歌上运行此代码）测试速度我会收到93/100的用户体验记录，而不是100/100而不删除float:left）。

如何在不破坏用户体验的情况下解决此问题？

Answer 1

您需要修改CSS并需要HTML分区标记：

<footer class="footer_outer">   
<section class="footer">
<div class="links">
<p><span id="solen"><a href="#">xxxx</a></span>  
<span id="solen"><a href="#">aaaa</a></span></p>
</div>
</section><br>
</footer>

<style>
.links {
text-align:centre;
display:inline-block;
}
</style>

div标签中的所有元素都将在中心对齐而不考虑页面大小而不妨碍用户体验

如何在不打破用户体验的情况下调整中心？

1 个答案: