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

Question

这是我的菜单的 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>

Answer 1

您不需要使用 <ol> .如果你有 <img>对于下方或上方的一些文本，最好使用 <figure>和 <figcaption>用于图像文本。

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

如果你想要<img>下方的图片文字只需将 <figcaption>在 <img> 下面.

然后，<div> 中的数字 :

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

每个 <figure> 的 CSS :

div figure {
    display: inline-block;
}

CSS 选择器 用法:http://www.w3schools.com/css/css_selectors.asp

示例:http://jsfiddle.net/qpk9smm8/