html - 为什么忽略左样式？

Question

我在以下代码的页面上有 Logo

<h1 class="site-title">
   <a class="logo custom-logo" href="url" title="Go to Site"> 
      <img alt="Site" height="136" src="url" width="298"> 
   </a> 
</h1>

我已将 left 属性添加到 logo 样式

.logo {
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
}

这个

left: 400px;

但它被忽略了。 Chrome Developer tools 显示此样式处于事件状态，但图像显示在距浏览器窗口左侧零距离处。

为什么？

Answer 1

为了使 left, top, bottom, right 值生效，必须对元素进行定位。

根据您的需要添加 position: absolute 或 position: relative。

Absolute 将相对于它最近定位的父级定位它。

Relative 将相对于自身定位。