当前位置：文江博客话题详情

尝试在列表中的CSS中使用负边距

发布于 2024-11-30 10:17:49 字数 447 浏览 1 评论 0原文

我花了一个小时尝试让 WordPress 侧边栏中的列表具有负边距。在 php 文件中胡乱使用边距、填充、侧边栏位置......但链接图像只是不断消失在背景后面。

这是我正在工作的页面： http://kirahenschel.com/

这就是我想要实现的目标： http://emgraphics.net/kira/idea2-11.jpg

理想情况下我'我也喜欢侧边栏的高度有限，这样底部的白框就会散开，但我可以应对它们位于右侧的情况。

有人有什么想法吗？徽标上的负边距效果很好，所以它只是一个列表？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

在梵高的星空下 2024-12-07 10:17:49

如果您只是想让列表向左移动，为什么不使用 CSS 定位属性呢？负边距可能会变得非常不稳定，并且（很可能）在此应用程序中不需要。

#nameoflistdiv {
    left: -20px;
}

您可能还需要更改 div 的位置元素的值，但这会碰撞您的 div 及其中的所有内容，与容器 div 重叠。

如果这不能回答您的问题，您可以发布您正在使用的 HTML 和 CSS 吗？ CSS 代码

margin-left: -20px;

确实应该在此应用程序中工作，所以请向我们展示您所拥有的内容。

If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.

#nameoflistdiv {
    left: -20px;
}

You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.

If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code

margin-left: -20px;

really should work in this application as well, so show us what you've got.

回复收藏 0 原文

愛上了 2024-12-07 10:17:49

您的负保证金正在按预期发挥作用。图像被截断的原因是您在 #main 容器上设置了 overflow:hidden。如果删除该属性，您的图像将会出现。

#main {
    background: url("images/blend.png") repeat-x scroll center top #2765CA;
    clear: both;
    height: 630px;
    overflow: hidden; /* delete this line */
    padding: 0;
}

Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.

#main {
    background: url("images/blend.png") repeat-x scroll center top #2765CA;
    clear: both;
    height: 630px;
    overflow: hidden; /* delete this line */
    padding: 0;
}

回复收藏 0 原文

~没有更多了~