无序列表不在DIV中居中。

Question

在处理响应式设计时，我注意到除了我的无序列表之外，所有内容都是响应式的。当我调整浏览器大小时，列表不会移动或保持在其DIV中心。我整天都尝试了很多东西，但根本无法理解。对于上下文，＃sitecontent是容纳所有内容的容器，＃sitecontent .leftsidebar包含图像和无序列表，＃sitecontent .leftsidebar ul是无序列表。有人可以检查出来并告诉我有什么问题吗？请访问我的网站http://www.tommaxwell.me并查看来源。

Answer 1

试试这个CSS：

#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}

#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}

Answer 2

我的浏览器在列表中添加了一些填充，这对于浏览器来说是非常常见的事情。您可以考虑使用重置（meyer，yui），或者只在ul和li上设置显式填充/边距。

Answer 3

我想我整个事情过于复杂，并且在这个过程中首先忘记了响应式设计的全部要点。在列表中添加填充/边距是完全可以接受的，因为我将在断点处使用媒体查询。不知道为什么我的脑子里的东西太复杂了！

Answer 4

嗨更新您的 css ，实际上我已将水平padding发送到您的.leftsidebar ul parent div并对其list-items进行了一些更改，现在工作正常..请参阅附图，以供参考： -

直到iPad的CSS

#sitecontent .leftsidebar ul {
    padding: 0 25%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#sitecontent .leftsidebar ul li {
    border-bottom: 1px solid #E5E5E5;
    display: block;
    font-family: helvetica;
    line-height: 25px;
    margin: 2px;
}

对于iphone，你必须写 css ： -

iphone的图片参考： -

直到iPhone的CSS

#sitecontent .leftsidebar ul {
    margin-top: 10%;
    margin-bottom:20%;
    position: relative;
}