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/

带有文字和图像的水平菜单

1 个答案: