CSS要素のタイトルが間違っています

Question

私は15年前に書かれたかのように見えるサイトに取り組んでおり、多くのhtmlスタイルを使用しています。それで、私はそれを応答可能にするためにすべてを変更しようとしています。

2列3列のボックス構造を作るために、6つのリストイメージのうち3つにalign="right"がありました。私がしようとしているのは、htmlの整列を取り出してIDで置き換えることです。そのため、後で私が望むものに変更することができます。しかし、私はIDを働かせることはできません。私は試してみました：

私はこの問題を解決するために間違ったCSSを構成していますか？私はこれが悪いHTML設定であることを知っています、私はそれを動作させることを試みています。彼らは、この持っていた

：

<li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" align="right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"> 
      </li><li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" align="right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"></li> 
      <li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam trailer" align="right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="spray foam rig" width="300" height="200"></li> 
      <li class="last"></li> 

を私はこれまでそれを変更：

<li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" id="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"> 
      </li><li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" id="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"></li> 
      <li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam trailer" id="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="spray foam rig" width="300" height="200"></li> 
      <li class="last"></li> 

Answer 1

.last-right { 
 
    float: right; 
 
}

<li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" class="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"> 
 
      </li><li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" class="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"></li> 
 
      <li class="last"><img src="images/Ad Boxes/300x200.gif" alt="spray foam trailer" class="last-right" width="300" height="200"><img src="images/Ad Boxes/300x200.gif" alt="spray foam rig" width="300" height="200"></li> 
 
      <li class="last"></li>

、あなたはクロームでインスペクタを取る場合は、あなたの場合は、答えを見つけるクラス を使用する必要はできません3times IDを使用それが既に浮かぶ前に見てください

Answer 2

CSSルールは（imgと#last-right間にスペースを注意していない）、次のようになります。

li img#last-right { 
    text-align: right; 
} 

すると、ターゲットidを持つ要素を、あなたは#last-right {...}以外のものを追加する必要はありません。

はさらに、 idではなく、使用クラス一意である必要があり、かつ動作しません imgに text-align: rightを設定し、それは以下のサンプルのように、そのプロパティを持っている必要があり、その親です。

li.last { 
 
    text-align: right; 
 
}

<ul> 
 
    <li class="last"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" class="last-right" width="300" height="200"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"> 
 
    </li> 
 
    <li class="last"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="spray foam machine" class="last-right" width="300" height="200"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="Spray foam equipment" width="300" height="200"> 
 
    </li> 
 
    <li class="last"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="spray foam trailer" class="last-right" width="300" height="200"> 
 
    <img src="images/Ad Boxes/300x200.gif" alt="spray foam rig" width="300" height="200"> 
 
    </li> 
 
    <li class="last"></li> 
 
</ul>