html - 页脚问题 : Text left, 文本正确，图像正确，所有内联和共线都不起作用

Question

我一直在尝试为我的网站创建一个新的页脚，如下所示: footer_nice

不幸的是，我只能在 gimp 中重新创建它，而不能在 html 和 css 中。 到目前为止，我只取得了部分成功。我已经能够对齐所有文本和图像，因此它们都是共线和内联的，如下所示: footer_bad

但是，它们并没有被分成左右。每当我尝试左浮动或文本右对齐，或使用 div 和 span 的其他组合时，它最终会破坏内联属性并且图像和文本不再共线。 我已经能够使用单独的 div 和 span 将文本分成左右两部分，但前提是它们不共线，这有点令人失望。

这是我的 HTMl 和 CSS:

/* footer */
.middle > * {
  vertical-align: middle;
}

footer {
	color: #666;				
  	font-size: 1.4em;
	background: #191919;
	border-top: 1px solid #444;
	padding: 20px;			
	white-space: nowrap;
}

footer a {
	color: #888;				
	display:inline-block;

} 		
footer a:hover {color: #BBB;}
footer img {
	padding: 0px 0px 0px 4px;	
}	 

<footer> 
	&copy; <script>document.write(new Date().getFullYear());</script><a href="index.html">&nbsp;WEBSITE</a>
	BUILT WITH <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">HTML</a>. OPTIMIZED.<span class="middle"><a href="url"><img src="https://placebear.com/32/25"/></a></span>
</footer>

有什么我想念的吗？我只是忘记了一些简单的 css 吗？任何输入都会很棒。我希望这不会成为一个愚蠢的问题。我在这里和 w3schools 上四处看了看，无法得出结论。谢谢大家!

Answer 1

添加到您的 HTML:

<div class="float-right>包含您的文本和 img 的类位于右侧

到您的 CSS: float:right给你的footer img

和

.float-right {float:right;}

请注意，在移动设备上查看时可能会出现响应问题，但它是桌面大小的快速修复。

不要忘记 clear之后的 float 元素。