Html 影响定心的Img浮动_Html_Css

Html 影响定心的Img浮动

html css

Html 影响定心的Img浮动,html,css,Html,Css,我试图添加一个后退按钮到我的页面，我把它放在左上角，它是浮动的但由于我在轨道图像的中心添加了它，它受到了影响，被推到了3 rem，浮动后退按钮的宽度 HTML 一般来说，我建议您避免使用float，因为它会对页面的其余部分产生奇怪的影响尽管如此，在jsFiddle上尝试它，float仍然可以在您的上下文中工作： .topContainer{ 背景色：黑色；宽度：90%；文本对齐：居中；填充：20px； } .后背按钮{ 浮动：左；宽度：30px；高度：30px；背景色：红色；

我试图添加一个后退按钮到我的页面，我把它放在左上角，它是浮动的

但由于我在轨道图像的中心添加了它，它受到了影响，被推到了3 rem，浮动后退按钮的宽度

HTML

一般来说，我建议您避免使用float，因为它会对页面的其余部分产生奇怪的影响

尽管如此，在jsFiddle上尝试它，float仍然可以在您的上下文中工作：

.topContainer{ 背景色：黑色；宽度：90%；文本对齐：居中；填充：20px； } .后背按钮{ 浮动：左；宽度：30px；高度：30px；背景色：红色； } .centerImage{ 背景颜色：蓝色；宽度：200px；高度：30px； } .topElement{ 显示：内联块； } 诈骗

您可以在按钮上使用position:absolute，将其从文档流中取出，这样它就不会再推送其他内容了

你想完成什么？根据描述很难想象你的意图。听起来好像你在这里根本不是漂浮的。@ChrisW。我只希望按钮和下一个div在同一行，但我需要以页面为中心的div。中心图像仍然向右移动，它没有在页面上居中。很抱歉，你完全正确！虽然不那么漂亮，但解决我发布的问题的另一种方法是用display:absolute和left:which适当的边距替换backButton中的float:left。这解决了中心元素向右移动的问题，但只有当顶栏始终位于相对于屏幕左侧的相同位置时，它才能正常工作。

  <body>  
    <a href="entry.html" style="display: inline-block; float: left;">
      <img src="backArrow.png" style="width:3rem; margin: .5rem; float: left">
    </a>
    <div id="track">
      <img id="track-image" src="track.png">
      <p id="track-fraud"> Track Fraud </p><br>
    </div>
  </body>

#track {
    text-align: center; 
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}

#track {
   text-align: center; 
}

.track-back {
  position: absolute;
  left: 10px;
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}