无序列表不在 DIV 中居中。答案

【问题标题】：Unordered list not staying centered in DIV.无序列表不在 DIV 中居中。
【发布时间】：2012-11-21 03:28:13
【问题描述】：

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

【问题讨论】：

对我来说一切都很好
您在哪个浏览器上遇到问题？

标签： css html html-lists responsive-design

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我想我把整个事情复杂化了，并且在这个过程中首先忘记了响应式设计的全部意义。在这种情况下，在列表周围添加填充/边距是绝对可以接受的，因为我将在断点处使用媒体查询。不知道我为什么要把事情搞得这么复杂！

【讨论】：

如果您发现一个特别有用的答案，您应该考虑接受。如果给出的答案都没有解决您的问题，也可以接受您自己的答案。

【解决方案4】：

嗨，用我的更新你的 css 实际上我已经给你的.leftsidebar ul parent div 提供了水平的padding 并对其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;
}

【讨论】：