帮助列出

Question

我是html和css的新手。我已经完成了一项大学任务来创建一个网页，我在设计方面有点过分了，本来应该很简单的事情变得有些复杂。

我目前正试图在我页面的左侧列出电视节目的演员。

- ＆gt; Wire-frame example＆lt; -

我尝试过的所有东西都失败了，我在这里感觉被殴打是我设法尝试的方法的一个例子，我知道或在网上找到了希望它可以做到这一点的方法。

- ＆GT; Current Progress＆LT; -

- ＆GT; Link to current HTML＆LT; -

正如你在线框中看到的那样，我理想地希望他们的名字以图片为中心，这是我的斗争。

有什么想法吗？

感谢。

Answer 1

您遇到的问题是标签和属于一个演员的图像没有分组。将它们放在<div>容器内。

<div>
  <div class="actor">
    <img src="Pictures/willingham.jpg" class="actor-image">
    <div class="actor-label">Travis</div>
  </div>
  <div class="actor">
    <img src="Pictures/willingham.jpg" class="actor-image">
    <div class="actor-label">Laura</div>
  </div>
</div>

这是新的CSS：

.actor {
  display: inline-block;
}

.actor-image {
  width: 86px;
}

.actor-label {
  font-weight: bold;
}

请注意，我还改进了许多其他内容，例如删除不必要的代码或使用CSS来设置元素而不是HTML（导致CSS的用途）。如果您希望标签看起来不同，只需更改/添加.actor-label选择器内的属性。