Question

我已经花了4个小时仍然无法解决它，我有2个div，一个浮动左边和一个右边，在左边div我有文本而在右边我有一个＆lt; * ul＆gt;，当我使用文本时 - 居中对齐;基于左侧模板的媒体查询，它完美地工作，但我也想要＆lt; * ul＆gt;在浏览器宽度减小时居中。请看看这里，让我知道我做错了什么，到底在哪里？ http://goo.gl/OJ5OHt感谢所有帮助我摆脱困境的人......

Answer 1

问题不在于UL，而是孩子们LI，它们是浮动的。

您有两种选择：

A）

通过自动保证金设置固定宽度为UL并居中：

.social-icons ul {
    margin: 5px auto;
    width: 220px;
}

B）从子LI中删除float，将它们设置为内联并将其子A设置为inline-block（然后UL text-align将起作用）：

.social-icons ul {
        text-align: center;
    }

.social-icons ul li {
    display: inline;
    float: none;
}

.social-icons ul li a {
    display: inline-block;
}

Answer 2

我能看到的唯一方法是在媒体查询下将以下内容添加到您的ul样式中：

margin: 0 auto;
width: 217px;

它必须是固定的宽度。

OR

将您的ul更改为：

text-align: center;

你的李和物品：

display: inline-block;

无论哪种方式都应该有效。

<ul>不能以媒体查询为中心</ul>

2 个答案: