Question

我正在开发一个看起来好像是15年前写的网站，他们使用了很多html风格。所以，我正在尝试改变这一切，以便让它能够做出响应。

他们在6个列表图像中的3个中https://github.com/search?q=user%3Ayournamehere+fork%3Afalse创建了一个包含2列3行的框结构。我想要做的是取出html对齐并用id替换它，所以我可以稍后改变它到我想要的任何东西。但是，我无法让id工作。我试过了：

align="right"

我是否构建了我的css错误以使其工作？我知道这是一个糟糕的HTML设置，但我只是试图让它工作。

他们有这个：

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

我把它更改为：

<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>

Answer 1

CSS规则应如下所示（注意img和#last-right之间没有空格。）

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

使用id定位元素时，除了#last-right {...}之外，您无需添加任何内容。

此外，id应该是唯一的，而是使用类，而将text-align: right设置为img将不起作用，它的父级应具有该属性，如下所示样品

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>

Answer 2

.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>

并且您使用了3次id，这是不可能的，您必须使用类如果您使用镀铬检查员，如果您在它已经浮动之前查看，则找到答案

CSS元素标题错误

2 个答案: