我试图在页面上添加后退按钮,将其放在左上角,它是浮动的。
但是由于我将其添加到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;
}
答案 0 :(得分: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”?
答案 1 :(得分:0)
您可以在按钮上使用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;
}