html - 内容がより高いスパンの隣にあるスパンのテキストを垂直方向に中央揃えするにはどうすればよいですか?

Question

左側にリンクの名前、右側に css で作成されたナビゲーション ボタンがあるフッターがあります。

このフッターに影響を与える私のコードは次のとおりです。

レイアウト/_footer.html.erb

<li>
  <a href="http://www.bruxzir.com/" title="http://www.bruxzir.com/">
    <span>HOME</span><span>&raquo;</span>
  </a>
</li>

カスタム.css

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  #footer { text-align: left; }
  #footer ul li { 
    display: block; 
    padding: 12px; 
  }
  #footer ul li a { } 
  #footer ul li a span:nth-of-type(2) {
    padding:9px;
    background-color: rgb(202, 0,0 );
    float: right;
    border-radius:2px;
  }
  #footer div.inner p {margin-left: 12px;}
}  

@media only screen and (min-width: 480px) { 
  #footer { text-align: center; }
  #footer ul li { display: inline; }
  #footer ul li:not(:last-of-type) { margin-right: 12px }
  #footer ul li a span:nth-of-type(2) { display: none; }
}

ご覧のとおり<a>、2 番目のスパンにパディングを追加してボタンを作成しました。そのため、左側のテキストに等しいパディングを追加しようとしましたが、パディングもマージンもまったく移動しませんでした。

Answer 1

li 要素にクラス識別子を設定してから、その識別子を使用して css 経由で変更してみてください。次に例を示します。

<li class="footer">
    <!-- footer code goes here -->

</li>

そしてcssで：

li .footer{
  /* Set margin here */
}

また、フッターをリストの外に置いて同じことを行うこともできます。これにより、css がリストの一部としてフッターに適用されるのを回避し、より簡単な css アクセスを行うことができます。