0

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

4

4 回答 4

0

嗨，用我的更新你的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;
}
于 2012-11-21T10:18:04.380 回答
0

试试这个 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;
}
于 2012-11-21T03:33:54.483 回答
0

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

于 2012-11-21T03:36:32.603 回答
0

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

于 2012-11-21T05:13:36.483 回答