Question

我正在努力解决我之前使用WordPress带来的一个问题，并希望在它上面加一些额外的眼睛，看看实际上我正在做的是最好的方法还是有更好的方法。

我在我网站的页眉和页脚中的主要

中设置了社交媒体部分。然而，我的“社交媒体栏”不是一个固定的大小，因为它是一个wordpress网站，并且可能会添加一些社交媒体按钮。这是我的代码的基础：

Header social media

这就是它在页眉和页脚中的显示方式。

<li id="header-widget-area">
<ul class="icons-medium">

    <li class="site-icon"><a target="_blank" href="#">Icon 1</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 2</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 3</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 4</a></li>
</ul>
</li>



#header-widget-area ul {
    float: right;
    padding: 0;
    width: 300px;
    border: 1px solid red;
}

#header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
    background: none repeat scroll 0 0 transparent;
    float: right;
    padding: 0;
    width: 60px;
    list-style-type: none;

}

我的jsfiddle - http://jsfiddle.net/nejsgyp3/

我希望它能够向右浮动以与我的页眉和页脚中的一些框和内容对齐（简单易玩！）但是对于媒体查询我想要以元素为中心和社交媒体里面的图标也要居中。所以我已经做到了这一点，但我仍然要保持宽度，否则它不会居中。

为此

添加了对CSS的轻微修改

#header-widget-area ul {
    float: none;
    padding: 0;
    width: 300px;
    border: 1px solid red;
    overflow:auto;
    margin: 0 auto;
}

#header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 0;
    width: 60px;
    list-style-type: none;

}

我的jsfiddle - http://jsfiddle.net/wswvokpu/

所以我的目标是允许添加更多内容但在媒体查询中没有额外的空间，因此这是正确的中心。另外，我的“图标1”是否有办法在媒体查询中保持定位？或者是我做的事情的唯一方法是始终有一个设定的宽度，然后当添加一个新图标时，只要我保持高度自动，它就会跟在下面？那么这意味着如果一个新的图标被添加到标题中，那么它的高度将会扩展，从而推动它下方的框下移？

提前致谢！

Answer 1

我想我明白你在问什么。这看起来对你好吗？

http://jsfiddle.net/nejsgyp3/1/

我给每个列表元素的宽度为25％，左侧浮动为居中文本。（如果您打算使用边框，您还需要设置box-sizing:border-box - 使用各种供应商前缀）。

我也将UL集中在我认为您在媒体查询中尝试做的事情。

CSS：

@media only screen and (max-width:600px) {

    ul {
        list-style:none;
        padding:0px;
        margin:0px;
    }
    #header-widget-area ul {
        float: none;
        padding: 0;
        width: 300px;
        border: 1px solid red;
        margin:0 auto;
        list-style:none;
    }
    #header-widget-area ul:after {
        content: " ";
        display:block;
        height:0px;
        clear:both;
        float:none;

    }

    #header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
        background: none repeat scroll 0 0 transparent;
        float: left;
        padding: 0;
        width: 25%;
        list-style: none;
        text-align:center

    }

}

使用CSS中没有宽度的浮动li元素居中

1 个答案: