Html 带有文本和图像的水平菜单

这是我的css和html的菜单。我正在努力想办法使它保持水平。任何帮助都将不胜感激。干杯

ol {
margin-top: 20px;

}

#images {
margin-left: 10px;
}

#images-text {
background: #f5f8ef;
border-radius: 10px;
width: 300px;
height: 40px;
font-family: Impact, Charcoal, sans-serif;
display: inline;

}

这是html

  <ol>
  <li class="newbar">
  <div id = "images">
  <img src="images/crowd.png" width ="200" height="180">
  <img src="images/crowd.png" width ="200" height="180">
  <p>

  <div id = "images-text">
  Arctic Monkeys
  </div>
  <div id = "images-text">
  Arctic Monkeys
  </div>
  </div>
  </li>
  </ol>
  </div>

北极猴子
北极猴子

您不需要使用

。如果您的

下面或上面有一些文本，最好将

和

用于图像文本

CSS选择器用法：

---

示例：

为什么

ol

而不是

ul

？那段HTML代码不完整或写得不好。正如@Paulie_D所说，你不需要

ol

也不能重复使用ID，它们在每个页面上都必须是唯一的。

<figure>
    <figcaption>
        Image text
    </figcaption>
    <img src="images/crowd.png">
</figure>

<div>
    <figure>
        ...
    </figure>
    <figure>
        ...
    </figure>
    <figure>
        ...
    </figure>
    ...
</div>

div figure {
    display: inline-block;
}