Question

我试图在页面上添加后退按钮，将其放在左上角，它是浮动的。

但是由于我将其添加到track-image的中心位置已受到影响，因此将其推入3 rem，即后退浮动按钮的宽度。

HTML

  <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>

CSS

#track {
    text-align: center; 
}

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

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

Answer 1

通常，我建议您避免使用float，因为它对页面的其余部分具有怪异的含义。

仍然，在jsFiddle上尝试，float在您的上下文中有效：

.topContainer{
  background-color:black;
  width:90%;
  text-align:center;
  padding:20px;
}

.backButton{
  float:left;
  width:30px;
  height:30px;
  background-color:red;
}

.centerImage{
  background-color:blue;
  width:200px;
  height:30px;
}

.topElement{
  display:inline-block;
}

<div class="topContainer">
  <div class="backButton topElement"></div>
  <div class="centerImage topElement">
    TrackFraud
  </div>
</div>

也许您应该在顶部栏的元素中添加“ display：inline-block”？

Answer 2

您可以在按钮上使用position：absolute，它将移出文档流，因此不再将其他内容推到上方。 https://jsfiddle.net/7frLasx5/

#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;
}

图浮动影响居中

2 个答案: