简体   繁体   English

如何从CSS排除元素?

[英]How to exclude an element from css?

Note: I've looked around at other threads, but I can't seem to get the answers there to work. 注意:我已经看过其他线程,但是似乎无法在那里得到答案。

I've been trying to exclude "#menu" from the margin property in "body{}" so that it doesn't overlap the text. 我一直试图从“ body {}”的margin属性中排除“ #menu”,以使其不与文本重叠。

My code: 我的代码:

body {
    text-align: center;
    background: black;
    background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
    font-family: Helvetica;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    color: black;
    background-attachment: fixed;
    background-size: cover;
    font-size: 20px;
    margin: 15%;
}

#menu{
    position: absolute;
    color: white;
    position: fixed;
    background-attachment: fixed;
    border: 5px;
    background-color: grey;
    background-size: contain;
    border-style: ridge;
    border-color: grey;
    width: 150px;
    text-align: left;
    float: left;
}

Override the CSS from the body with the CSS for the menu: 使用菜单的CSS从正文覆盖CSS:

#menu { border: none; border-width: 5px; }

Add anything else you might need in there. 在此添加您可能需要的其他任何内容。

If you are trying to make the margin on #menu be reset to the default value, you can add margin: none; 如果您试图将#menu上的边距重置为默认值,则可以添加margin: none; to your CSS, so that it looks something like this: 到您的CSS,这样看起来像这样:

body {
    text-align: center;
    background: black;
    background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
    font-family: Helvetica;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    color: black;
    background-attachment: fixed;
    background-size: cover;
    font-size: 20px;
    margin: 15%;
}

#menu{
    position: absolute;
    color: white;
    position: fixed;
    background-attachment: fixed;
    border: 5px;
    background-color: grey;
    background-size: contain;
    border-style: ridge;
    border-color: grey;
    width: 150px;
    text-align: left;
    float: left;
    margin: none;
}

That should do the trick! 这应该够了吧!

probably it was what inside your #menu 可能就是您的#menu菜单中的内容

#menu{
position:absolute;  <-- this are interfering with your margins
color:white;        
position:fixed;     <-- this are interfering with your margins
float:left;         <-- this are interfering with your margins
margin: none;       <-- remove that and try set the margin here (eg: margin: 10px;)
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM