Question

我已经为网页页脚的链接创建了一个简单的水平列表。问题是列表超出了div id =＆＃34; footer-links＆＃34;的右边界。在它绕到下一行之前。在我的iPad中以纵向模式分辨率768进行查看时会发生这种情况。

这个问题让我绝对疯狂！我非常感谢任何帮助。

我试图从我的iPad上发布一张图片，但是因为我是新手，它不会让我失望。这是代码：

HTML很简单：

<div id="links-wrapper">
<div id="footer-links">
<p>Info</p>
<ul>
 <li class="first"><a href="">Link 1</a></li>
 <li><a href="">Link 2</a></li>
 <li><a href="">Link 3</a></li>
 <li><a href="">Link 4</a></li>
 <li><a href="">Link 5</a></li>
 <li><a href="">Link 6</a></li>
 <li><a href="">Link 7</a></li>
</ul>
</div>
</div>

CSS：

#links-wrapper {
width:auto;
}

#footer-links {
margin:0 4.545455%;
font-size:.85em;
line-height:175%;
}

#footer-links ul {
margin: 0px 0 30px;
padding: 0;
list-style: none;
}

#footer-links li {
display:inline;
margin: 0;
padding: 0 .4em 0 .6em;
border-left: 1px solid;
}

#footer-links .first {
padding-left: 0;
border: 0;
}

#footer-links p {
font-weight:700;
margin-bottom:1px;
text-decoration:underline;
}

Answer 1

Clay，您可以通过将display：block应用于媒体查询中的LI，以获得您希望它们响应的宽度。例如：

@media (max-width:768px){
   #footer-links li {
      display:block;
      margin: 0;
      padding: 0 .4em 0 .6em;
      border-left: 1px solid;
   }  
}

请参阅HERE

但考虑到这一点，如果您正在构建响应式设计，那么您应该研究一个响应式设计框架。他们将所有这些编码出来供您使用。最好和最有效的是Bootstrap3。仔细研究它，特别是导航丸。

祝你好运

修改

回复您的评论如下。我太过分了。我经常做同样的交易。在这种情况下，您可以修改代码并使用DIV而不是LI。然后使用正确的bootstrap类和级联来根据屏幕大小调整所有内联，然后是两列链接，然后在智能手机上的sigle列。

请参阅此其他DEMO HERE了解其他替代方案

*暗示，只要有一点创造力，你就可以像我的第一个例子一样保留你的LI并叠加它们，但在它旁边添加一个徽标或其他东西作为填充物;）

水平列表超出右边距

1 个答案: