Html 将徽标向左移动几个 px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31366414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move logo to the left a few px
提问by gwerd
I recently had a problem where my logo would be would be cut off when I tried minimising my browser. That was easily solved by taking away margin-left{negative-value;} Now, my logo is positioned where I would like to move it to the left a few px but obviously don't want to use the above property and value. I tried margin-right which didn't seem to work. I also want to stay way from positioning and just focus on using normal flow. In the picture below you can see the background image of the home navigation link is overlapping with the logo. I just want to move it over to the left a bit Any help appreciated!
我最近遇到了一个问题，当我尝试最小化浏览器时，我的徽标会被切断。这很容易通过去掉 margin-left{negative-value;} 来解决。我尝试了 margin-right ，这似乎不起作用。我也想远离定位，只专注于使用正常流程。在下图中，您可以看到主页导航链接的背景图像与徽标重叠。我只想将它移到左边一点任何帮助表示赞赏！
https://jsfiddle.net/w95n3x0L/2/
https://jsfiddle.net/w95n3x0L/2/
<div id="header">
<p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>
#logo img {
width: 320px;
margin-top: -60px;
}
回答by 5ervant
I just want to move it over to the left a bit but without using a negative value or positioning.
我只想将它向左移动一点，但不使用负值或定位。
You can't move it to the left without using a negative value as the image has no computed left margin. Just use such margin-left: -50px;if you want to move it over to the left:
您不能在不使用负值的情况下将其向左移动，因为图像没有计算的 left margin。margin-left: -50px;如果你想把它移到左边，就使用它：
#logo > img {
margin-left: -50px;
}
All i want is to move the logo to the left a few px. so the background image of my home navigation isn't overlapping.
我想要的只是将徽标向左移动几个像素。所以我的主页导航的背景图像不重叠。
If you want to get rid of a link-overlapping image, then you can set the z-indexof your #nav-barhigher than the z-indexof your header such like this:
如果你想摆脱链接重叠的图像，那么你可以像这样设置z-index你的#nav-bar高于z-index你的标题：
#nav-bar {
z-index: 1;
}
This way, the #logowill overlap the #nav-barno more.
这样，将#logo不再重叠#nav-bar。
Also please change <p id="logo">...</p>to <div id="logo">...</div>as its content doesn't have a paragraph.
也请更改<p id="logo">...</p>为，<div id="logo">...</div>因为它的内容没有段落。
回答by Pmpr
To move the logo some pixels to the left, you should add position: relativeto the #headerand position the logoabsolute like this:
对于一些像素移动标志的左边，你应该添加position: relative到#header和位置logo绝对是这样的：
(Please remove the ptag from your logo section like this):
（请p像这样从您的徽标部分删除标签）：
HTML
HTML
<div id="header">
<img id="logo" src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
</div>
CSS
CSS
#header{
position: relative;
}
#logo{
position: absolute;
width: 320px;
height: 100px;
top: 60px;
left: -10px;
}
回答by Keammoort
You could always crop source image if that's not a problem. But if you do not want to do this you can set image as background and move it a little bit like this:
如果这不是问题，您可以随时裁剪源图像。但是如果你不想这样做，你可以将图像设置为背景并像这样移动它：
<p id="logo"></p>
And apply this CSS:
并应用此 CSS：
p#logo {
height: 154px;
width: 320px;
background-image: url('http://i.imgur.com/UwpTOvm.png');
background-repeat: no-repeat;
background-position-x: -25px; /*move it to the left*/
background-size: 100%;
}
